使用vue做一个简单的SPA应用，配置webpack
安装Node.js
webpack是基于Node.js的打包工具，自然是先安装Node。Node官网
在开始之前，首先全局安装webpack，以免后面忘记安装而出错。命令如下：
npm install webpack -g
初始化项目
新建一个文件夹，比如叫vueManager。
打开命令行，cd 到vueManager目录下，执行下面命令初始化项目。
npm init
在这里一路回车即可；如果回车提示"Sorry, name can no longer contain capital letters"。 那就是让你起一个名字。然后一路回车，忽略配置信息，最后生成package.json配置文件。
或者直接通过下面命令可以跳过以上步骤
npm init -y/-f
给项目加上语法报错和代码规范检查
安装eslint, 用来检查语法报错, 当我们书写js时, 有错误的地方会出现提示。
npm install eslint eslint-config-enough eslint-loader --save-dev
npm install（简写npm i）可以同时安装多个包, 包名之间用空格分隔。 包会被安装进node_modules目录。
--save-dev会把安装的包和版本号记录到package.json中的devDependencies对象中， --save, 会记录到dependencies对象中。--save-dev是开发环境用到的，--save是生产环境用到的。
有些npm包安装是需要编译的，不同的环境可能无法通用，这样我们在git提交的时候忽略node_modules，还有些IDE的默认的配置文件，比如webstorm中的.idea文件，也不需要提交，我们可以将这些不需要提交的文件名写入.gitignore文件中。
这样其他人拉取下来代码后是没有node_modules文件，那么通过下面命令：
npm install
就会将package.json中的devDependencies和dependencies中的相应的包全部下载下来。
eslint-config-enough是配置文件, 规定了代码规范, 要使它生效, 我们需要在package.json中配置。
"eslintConfig": {
"extends": "enough",
"env": {
"browser": true,
"node": true
}
}
eslint-loader用于在webpack编译的时候检查代码, 如果有错误, webpack会报错。
项目里安装了eslint还没用, 我们的IDE和编辑器也得装eslint插件支持它。
比如我用的 Visual Studio Code 需要安装ESLint扩展。
atom需要安装linter和linter-eslint这两个插件, 装好后重启生效。
WebStorm需要在设置中打开eslint开关。
写页面
- 建立src/index.html文件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
</body>
</html>
这是一个空页面。 注意：我们不需要自己写<script src="index.js"></script>来引入，包括样式文件都不需要，我们只需要把所有依赖的文件导入到入口文件中，webpack都会帮我们打包好，还有一个原因是打包后的文件名和路径可能会变， 所以我们用webpack插件帮我们自动加上。
安装webpack和Babel
首先，执行下面命令。
npm install webpack webpack-dev-server html-webpack-plugin html-loader css-loader style-loader file-loader url-loader --save-dev
webpack-dev-server是webpack提供的用来开发调试的服务器, 让你可以用http://127.0.0.1:8080/ 这样的url打开页面来调试, 可能端口号不同，可以自己设置，有了它就不用配置nginx了, 方便很多。
html-webpack-plugin, html-loader, css-loader, style-loader等这些都是打包html、css文件的插件。
html-webpack-plugin和html-loader的区别, css-loader和style-loader的区别, 看下面的配置文件便可一目了然。
file-loader和url-loader是打包二进制文件的插件。
然后, 为了让不支持ES6的浏览器也能正常运行，我们还需要安装babel，它会把我们写的ES6代码转化成ES5， 这样我们源代码写ES6， 打包时就会生成ES5。
npm install babel-core babel-preset-env babel-loader --save-dev
babel-core是babel的核心编译器。
babel-preset-env是一个配置文件，可以将es6/es7转换成es5，对对滴，你木有看错，它并不是只能转es6。
babel还有其他的配置文件，如果你项目中只使用了es6，只需转es6，那就安装babel-preset-es2015插件即可。命令如下：
npm install babel-preset-es2015 --save-dev
只安装babel-preset-env是不够的，还需要在package.json中配置。
"babel": {
"presets": [
"env"
]
}
在打包时babel会读取package.json中babel字段的内容， 然后执行相应的转换。
如果你是用的是es2015，那么配置也要相应的修改为：
"babel": {
"presets": [
"es2015"
]
}
babel-loader是webpack的插件。
安装vue-loader 和 vue-template-compiler
npm install vue-loader vue-template-compiler --save-dev
配置webpack
基本上目前用到的以及想到的包都装好了，下面我们就来创建webpack配置文件webpack.config.js。
注意：这个文件是在node.js中运行的, 所以不支持ES6的import语法。 看内容吧:
//整个配置中我们使用 Node 内置的 path 模块，并在它前面加上 __dirname这个全局变量。可以防止不同操作系统之间的文件路径问题，并且可以使相对路径按照预期工作。
const path = require('path');
var webpack = require('webpack');
var htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
//打包的总入口文件
entry: './src/index.js',
//配置打包输出相关的
output: {
//打包输出目录(必须是绝对路径，使用 Node.js 的 path 模块)
path: path.join(__dirname,'dist'),//打包到dist文件夹
filename: 'bundle.js'//最终打包成的文件名bundle.js
},
module: {
//关于模块配置
//当webpack当遇到import ... 时, 会调用这里配置的loader对引用的文件进行编译
//配置各种类型文件的加载器, 称为loader
rules: [
// 模块规则（配置 loader、解析器等选项）
{
// 使用babel编译ES6/ES7/ES8为ES5代码
// 使用正则表达式匹配后缀名为.js的文件
test: /\.js$/,
// 排除node_modules目录下的文件, npm安装的包不需要编译
exclude: /node_modules/,
/*
use指定该文件的loader, 值可以是字符串或者数组.
这里先使用eslint-loader处理, 返回的结果交给babel-loader处理. loader的处理顺序是从最后一个到第一个.
eslint-loader用来检查代码, 如果有错误, 编译的时候会报错.
babel-loader用来编译js文件.
*/
use: ['babel-loader', 'eslint-loader']
},
{
// 匹配.html文件
test: /\.html$/,
/*
使用html-loader, 将html内容存为js字符串, 比如当遇到
import htmlString from './template.html'
template.html的文件内容会被转成一个js字符串, 合并到js文件里.
*/
use: 'html-loader'
},
{
//使用vue-loader，编译写入.vue文件
test:/\.vue$/,
use:'vue-loader'
},
{
// 匹配.css文件
test: /\.css$/,
/*
先使用css-loader处理, 返回的结果交给style-loader处理.
css-loader将css内容存为js字符串, 并且会把background, @font-face等引用的图片,
字体文件交给指定的loader打包, 类似上面的html-loader, 用什么loader同样在loaders对象中定义, 等会下面就会看到.
*/
use: ['style-loader', 'css-loader']
},
{
/*
匹配各种格式的图片和字体文件
上面html-loader会把html中<img>标签的图片解析出来, 文件名匹配到这里的test的正则表达式,
css-loader引用的图片和字体同样会匹配到这里的test条件
*/
test: /\.(png|jpg|jpeg|gif|eot|ttf|woff|woff2|svg|svgz)(\?.+)?$/,
/*
使用url-loader, 它接受一个limit参数, 单位为字节(byte)
当文件体积小于limit时, url-loader把文件转为Data URI的格式内联到引用的地方
当文件大于limit时, url-loader会调用file-loader, 把文件储存到输出目录, 并把引用的文件路径改写成输出后的路径
比如 
会被编译成，也就是base64表示
[站外图片上传中……(3)]
而[站外图片上传中……(4)]
会被编译成
[站外图片上传中……(5)]
*/
use: [
{
loader: 'url-loader',
options: {
limit: 5000
}
}
]
}
]
},
/*
配置webpack插件
plugin和loader的区别是, loader是在import时根据不同的文件名, 匹配不同的loader对这个文件做处理,
而plugin, 关注的不是文件的格式, 而是在编译的各个阶段, 会触发不同的事件, 让你可以干预每个编译阶段.
*/
plugins: [
/*
html-webpack-plugin用来打包入口html文件
entry配置的入口是js文件, webpack以js文件为入口, 遇到import, 用配置的loader加载引入文件
但作为浏览器打开的入口html, 是引用入口js的文件, 它在整个编译过程的外面,
所以, 我们需要html-webpack-plugin来打包作为入口的html文件
*/
new HtmlWebpackPlugin({
/*
template参数指定入口html文件路径, 插件会把这个文件交给webpack去编译,
webpack按照正常流程, 找到loaders中test条件匹配的loader来编译, 那么这里html-loader就是匹配的loader
html-loader编译后产生的字符串, 会由html-webpack-plugin储存为html文件到输出目录, 默认文件名为index.html
可以通过filename参数指定输出的文件名
html-webpack-plugin也可以不指定template参数, 它会使用默认的html模板.
*/
filename:'index.html', //在内存中生成的网页名
template: './src/index.html' //生成网页名的依据
})
]
}
基础回顾
通过下面命令可以查看webpack的所有帮助指令。
webpack -h
比如：查看打包的进度和颜色。
webpack --progress --colors
打包并压缩
webpack -p
关于代码压缩
webpack -p 是 webpack内置的压缩文件的命令，但是项目最好使用插件配置。
webpack 自带了一个压缩插件 UglifyJsPlugin，只需要在配置文件中引入即可。
// 压缩js
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
},
comments: false //去掉版权信息等注释
}),
// 代码顺序优化
new webpack.optimize.OccurrenceOrderPlugin()*/
加入了这个插件之后，编译的速度会明显变慢，所以一般只在生产环境启用。
不足之处
通过 webpack 命令可以将文件打包在dist目录下，但这样每修改一次代码都得重新执行命令，然后刷新页面。
webpack --watch 虽然可以将没有修改的文件缓存在内存中，只打包修改过的，但还是需要手动刷新浏览器。
使用 webpack-dev-server包 + html-webpack-plugin 插件，文件更新后可以自动打包并且刷新页面。
在package.json的scripts字段中配置：
"dev": "webpack-dev-server --inline --hot --open --port 8023"
我们知道本地默认端口是8080，为了避免不必要的冲突，我们自己定义一个端口号，比如：8023。LOVE，懂得人自然懂。（鬼脸）
跑起来
下面我们在终端执行� npm run dev 启动项目。
npm run dev
你会发现浏览器自动打开页面，并且每次修改代码保存后，页面会自动刷新。
这些都得益于配置的�几个参数，一一讲解。
--inline 自动刷新。
--hot 热加载。
--open 自动打开页面。
--port 当然是端口了。
--host 可以指定服务器的ip，不指定默认为127.0.0.1（localhost）
这个时候你肯定会好奇为什么dist目录还是空的。那当然了，因为你没有执行webpack去打包嘛。
我们只是在内存中生成了文件，并没有生成物理文件，这样极大的提高了速度和效率。凡是对可以编译的文件修改后都会自动打包并且刷新浏览器。
等到最终项目完成的时候再执行 webpack 命令打包。
参考：
webpack中文官网 华尔街见闻技术团队--webpack2 打包实战
demo后续的整个过程和踩的坑都会整理出来。权当是自己的在线笔记罢了。若有不对或不合理的地方还望指正，共同进步。
