本篇为在学习Vue2.x的时候使用Webpack2.x的踩坑与总结，关于Vue2.x的踩坑与总结，
原文链接：
项目地址：本地安装npm包后如何在命令行运行
在npm安装包的时候，如果使用全局安装，即npm install <packageName> -g，则在安装完成后可以在终端运行作为命令去运行，但是如果是本地安装的包npm install --save-dev <packageName>，则无法这样直接运行。那么如何运行本地安装的包呢？首先进入项目目录（即package.json所在目录），然后使用以下命令即可运行：
$ node_modules/.bin/
除了可以这样在命令行运行外，还可以在文件中运行
//index.jslet webpack = require('webpack');webpack(); $ node index.js
webpack1.x升级2.x
1.module.loaders改成了module.rules
旧的loaders被新的rules取代，后者允许配置loader以及其他更多项。
module: {- loaders: [+ rules: [ { test: /\.css$/,- loaders: [+ use: [ { loader: "style-loader" }, { loader: "css-loader",- query: {+ options: { modules: true } ] }, { test: /\.jsx$/, loader: "babel-loader", // Do not use "use" here options: { // ... } } ] } 以上写法中，Rule.loader是Rule.use: [ { loader } ]的简写。
2.链式调用loaders
在webpack1.x中loaders可以链式调用，在2.x中依旧有该特性，使用rule.use配置项，use中设置一个loaders的数组而在1.x中使用!连接各个loader，旧版写法只有在使用旧的module.loaders时有效。
module: {- loaders: {+ rules: { test: /\.less$/,- loader: "style-loader!css-loader!less-loader"+ use: [+ "style-loader",+ "css-loader",+ "less-loader"+ ] } } 3.取消在模块中自动添加-loader后缀
webpack2.x中不再添加-loader
module: { rules: [ { use: [- "style",+ "style-loader",- "css",+ "css-loader",- "less",+ "less-loader", ] } ] } 根据官方说法，做出这样更改的原因是省略-loader会对新手造成误解，所以去掉这个功能，如果想打开这个旧的功能，可以配置resolveLoader.moduleExtensions，但是并不推荐这么做，具体参阅
+ resolveLoader: {+ moduleExtensions: ["-loader"]+ } 4.使用options配置loader
在webpack1.x中可以通过webpack.config.js的自定义属性来配置loader，这在webpack2.x中无法执行
module.exports = { ... module: { use: [{ test: /\.tsx?$/, loader: 'ts-loader' }] }, // does not work with webpack 2 ts: { transpileOnly: false } }//webpack2 use optionsmodule.exports = { ... module: { use: [{ test: /\.tsx?$/, loader: 'ts-loader' options: { transpileOnly: false } }] }} webpack插件的使用
webpack-dev-server1.x升级2.x
1.在CLI使用的时候，--inline默认开启，无需在输入命令时添加
2.删除contentBase用proxy代替
3.减少控制台无用输出，在1.x中，当我们停掉服务器后，控制台会一直输出错误信息，但是在2.x中只会输出[WDS] Disconnected!
extract-text-webpack-plugin
在使用webpack将vue_spa打包后，并不会出现css，因为css被打包入build.js，如果从vue组件中抽离出css，需要安装插件extract-text-webpack-plugin，在使用的时候需要配合v2版本的才可以使用（如果使用了webpack2，则对应的插件版本都需要用v2版本）。具体配置如下：
module:{ rules:[ { test: /\.vue$/, loader: 'vue', options: { loaders:{ css: extractTextPlugin.extract({ loader: 'css-loader', fallbackLoader: 'vue-style-loader' }) } } } ]},plugins: [ new webpack.HotModuleReplacementPlugin(), new extractTextPlugin({ filename:'/style.css', allChunks:true })], 在options中：
options.loader: string | object | loader[] (必填项) 这里的 loader(s) 用于将资源转换为css导出模块
options.fallbackLoader: string | object | loader[] 当css没有被导出的时候这里的 loader(s) 会被使用 （即当在plugins模块中设置allChunks:false的时候）
在plugins中：
filename：可以设置被导出的css文件的路径以及名字
allChunks：从所有附加块中提取（默认情况下，它只从初始块中提取）
html-webpack-plugin
plugins: [ new htmlWwebpackPlugin({ filename: 'assets/admin.html' }),] title：用于生成文档的document
filename：要注入的html文件，默认为index.html。可以自定义（例如：assets/admin.html）
inject：
true | ‘head’ | ‘body’ | false 将资源注入所给的template或templateContent，当设置为 true 或者 ‘body’，所有的资源会被注入到body底部。而head则会将js放到headelementfavicon: 在输出的html中添加favicon
hash: true | false 如果为true，则将一个唯一的webpack编译散列附加到所有包含的脚本和CSS文件。这对缓存清除很有用。
cache: true | false 如果为true（默认），尝试仅在更改后才发出文件。
是否要更换preset？
webpack2.x默认支持es6的模块，所以在编译时候没有必要将它们先转换为CommonJS模块再处理，所以在github中出现了babel-preset-es2015-webpack，但是这个模块我在使用的时候出现了Cannot remove 'babel-plugin-transform-es2015-modules-commonjs' from the plugin list.的问题，根据babel-preset-es2015-webpack中的叙述以及可知，babel-preset-es2015已经支持不转换模块中的import和export，只需要设置.babelrc
{ "presets": [ [ "es2015", { "modules": false } ] ]}