用webpack的过程，就是一个不断入坑和出坑的过程。回望来时路，一路都是坑啊！现把曾经趟过的那些坑整理出来，各位看官有福了~
文章末尾有我用到的依赖的版本信息，若你发现某个问题与我在本文中的描述不一致时，可以看看是否版本与我所使用的不同所致。
一、Mac平台和Windows平台的差异导致的问题
1、路径上的差异
在配置entry选项的时候，我这么配置：
entry: { main: __dirname + '/src/index.js'} 这样写在Mac下完全没有问题，但在Windows下会报错：
ERROR in Entry module not found: Error: Can't resolve 'd:\demo\config/src/index.js' in 'd:\demo' 这是因为两个平台的路径是存在差异的。Mac是/，而Windows是\。
解决办法是：
const path = require('path');const entryPath = path.resolve(__dirname, '/src/index.js');entry: { main: entryPath} 2、设置node环境变量的差异
在Mac上，可以在package.json中配置：
"scripts": { "build"："NODE_ENV=production && ..."} 但在Windows中是不行的。要解决这个问题，需要用到cross-env模块。
先安装它：
npm i cross-env --save-dev 然后把上面的配置可以改成：
"scripts": { "build"："./node_modules/.bin/cross-env NODE_ENV=production && ..."} 二、babel配置中的坑
对于babel的配置，容易出现两个问题：
1、容易在presets配置的时候少一层[]。
配置成这样是有问题的：
presets: [ 'es2015', 'react', 'stage-2'], 这在打包的时候会报错：
Using removed Babel 5 option: foreign.modules -Use the corresponding module transform plugin in the `plugins` option babel 6中，这里一定要包这层[]，完整的应写成如下这样。
{ test: /\.(js|es|es6|jsx)$/, use: [ { loader: 'babel-loader', options: { presets: [ ['es2015', {modules: false, loose: true}], ['react'], ['stage-2'] ], plugins: [ ['transform-runtime'] ], comments: false, cacheDirectory: true } }, { loader: 'eslint-loader', options: { configFile: eslintConfigPath } } ], exclude: excludeReg}, 其中的modules: false配置项是告诉es2015 preset避免把import statements编译成CommonJS，这样Webpack才好做tree shaking。
2、容易忽略掉.vue文件中的待转码的babel语句。
如上文这样配置，对于.js、.es、.es6、.jsx等JavaScript文件的转码是不成问题了，但是，这些配置却无法影响到.vue文件。不过，.vue文件在编译的时候，vue-loader会默认去加载.babelrc中的配置。所以，我们应该把这些babel的配置写入.babelrc文件中，以便于与.vue文件的编译共用。使这些配置项在JavaScript文件和.vue文件编译的时候都发生作用。
所以，我们将babel的配置options抽出来，放到.bablerc文件中，代码为：
{ presets: [ ["react"], [ "es2015", {"modules": false, "loose": true} ], ["stage-2"] ], plugins: [ ["transform-runtime"] ], comments: false} 而修改后的babel-loader配置为：
{ test: /\.(js|es|es6|jsx)$/, use: [ { loader: 'babel-loader', options: { cacheDirectory: true } }, { loader: 'eslint-loader', options: { configFile: eslintConfigPath } } ], exclude: excludeReg}, 三、处理未模块化的库，如 Zepto
对于未模块化的库，如果直接import，在webpack打包的时候会报错的。详见：
解决的办法就是在module的rules下增加如下配置项：
{ test: require.resolve('zepto'), loader: 'exports-loader?window.Zepto!script-loader'} 其中，require.resolve() 是 nodejs 用来查找模块位置的方法，返回模块的入口文件，如 zepto 为 ./node_modules/zepto/dist/zepto.js。
此外，这里还用到了两个loader，我们需要先安装他们：
npm i --save-dev script-loader exports-loader 四、clean-webpack-plugin的root配置项不能少
var CleanWebpackPlugin = require('clean-webpack-plugin');new CleanWebpackPlugin(baseConfig.output.path, { root: rootPath, verbose: true}), 这个root配置项不能缺少，否则会出现如下提示，并且clean操作被跳过。
clean-webpack-plugin: ...\build is outside of the project root. Skipping... 另外，这verbose配置项挺有些费解。verbose的意思是冗长的，啰嗦的。实际表示的意义是Write logs to console，即是否要往终端上输出log。
五、extract-text-webpack-plugin的坑
1、目前不能在使用web-dev-server的时候使用该插件
在使用web-dev-server的时候，不要使用extract-text-webpack-plugin，目前不支持。参见：
2、如果webpack的多个配置文件中（如webpack.base.config.js、webpack.dev.config.js、webpack.prod.config.js等），在用Object.assign合并时，后一个配置文件会将前一个文件的plugins选项覆盖掉，或者当配置文件中误将plugins选项错误地放置到了module下面，将会因为plugins选项下缺少extract-text-webpack-plugin插件的配置而报如下错，不仔细观察很难排查错误原因：
Module build failed: Error: "extract-text-webpack-plugin" loader is used without the corresponding plugin 参见：
六、用less-loader的时候得同时安装less模块，单独安装less-loader模块时，不会自动安装less模块
使用less-loader的时候得同时安装less模块，否则会报出错误：
Module build failed: Error: Cannot find module 'less'。 less-loader需要依赖less才能实现。因为npm3.0+中less是不会随着less-loader自动安装的。
七、hash、chunkhash、contenthash之间的误用
这三个“鬼东西”，真的很容易让人傻傻分不清楚！
关于hash、chunkhash的区分，详见：
chunkhash是随着某一特定chunk的内容变化而变化，即根据某个特定chunk的内容计算出的hash值。webpack计算chunkhash时，根据入口文件(entry)不同而分别计算。当chunk中有一部分内容变化时（不管是js还是css），就会重新计算chunkhash。webpack使用NodeJS内置的crypto模块计算chunkhash。每个chunk资源会生成与其内容相关的chunkhash。
hash是随着compilation进行而产生，而在项目中任何一个文件改动后都会创建新的compilation，相应的hash值也就会更新。hash可以理解为项目总体文件的hash值，而不是针对某个具体chunk的。即它是受到所有chunks影响的hash。每次编译生成一个唯一hash，但所有资源全打上同一个 hash，无法完成持久化缓存的需求。
有人说，热更新模式下，将hash改成chunkhash后，vendors文件会变成undefined，试了很多种传参格式，依然无法达到目的。最后发现只是在webpack热更新模式下才会如此，又因为开发环境可以忽略版本控制，所以拆分两个环境下的配置解决此问题。
不要在开发环境使用 [chunkhash]/[hash]/[contenthash]，因为不需要在开发环境做持久缓存，而且这样会增加编译时间，开发环境用 [name] 就可以了。
extract-text-webpack-plugin提供了另外一种hash值：contenthash。顾名思义，contenthash代表的是文本文件内容的hash值，也就是只有style文件的hash值。
因为可以在生产环境配置上：
new ExtractTextWebpackPlugin({ filename: 'css/[name].[contenthash].css', allChunks: true}) 还应在生产环境配置上生成稳定的模块ID的插件:
new webpack.HashedModuleIdsPlugin(), 八、new webpack.optimize.UglifyJsPlugin打包时的错误
注意，当前版本的UglifyJsPlugin在打包时会存在如下报错：
ERROR in build.js from UglifyJsSyntaxError:Unexpected token punc «(», expected punc «:» 原因在于这个插件依赖了uglify-js，但是当前版本的uglify-js是不支持ES6代码的压缩的，解决的办法是：
在package.json的devDependencies中加入如下依赖，然后重新执行一遍npm install。
"uglify-js": "git+https://github.com/mishoo/UglifyJS2.git#harmony" 参见：https://github.com/webpack-contrib/uglifyjs-webpack-plugin
new webpack.optimize.UglifyJsPlugin({ mangle: { // 排除不想要压缩的对象名称 except: ['$', 'exports', 'require', 'module'] }, compress: { // http://lisperator.net/uglifyjs/compress warnings: false, // warn about potentially dangerous optimizations/code conditionals: true, // optimize if-s and conditional expressions unused: true, // drop unused variables/functions comparisons: true, // optimize comparisons sequences: true, // join consecutive statements with the "comma operato" dead_code: true, // discard unreachable code 丢弃未使用的代码 evaluate: true, // evaluate constant expressions join_vars: true, // join var declarations if_return: true // optimize if-s followed by return/continue }, output: { // https://github.com/mishoo/UglifyJS2/blob/master/lib/output.js comments: false }, sourceMap: false //将错误信息的位置映射到模块。这会减慢编译的速度。仅在开发环境下使用。}), 顺便，注意一下上面UglifyJsPlugin的那些压缩选项的配置。
是unused和dead_code这两个选项在允许tree shaking。
九、new webpack.optimize.CommonsChunkPlugin打包出的公共文件忘记引入或引入顺序不对导致的错误
注意：如果使用CommonsChunkPlugin生成了公共文件，但是在页面中却没有引入CommonsChunkPlugin生成的公共文件或者引入这个公共文件的位置不在其它用webpack打包的JS文件的前面，在浏览页面时就会出现报错：
Uncaught ReferenceError: webpackJsonp is not defined 为了确保这些文件引入的顺序正确，需要在html-webpack-plugin插件的配置项中加入这个配置项：
// necessary to consistently work with multiple chunks via CommonsChunkPluginchunksSortMode: 'dependency' 附：依赖模块版本信息列表
"dependencies": { "babel-polyfill": "^6.23.0", "element-ui": "^1.2.5", "es6-promise": "^4.1.0", "vue": "^2.2.4", "vue-router": "^2.3.0", "vuex": "^2.2.1", "zepto": "^1.2.0"},"devDependencies": { "autoprefixer": "^6.6.1", "babel-core": "^6.22.1", "babel-loader": "^6.2.10", "babel-plugin-transform-runtime": "^6.23.0", "babel-preset-es2015": "^6.22.0", "babel-preset-es2015-webpack": "^6.4.3", "babel-preset-latest": "^6.22.0", "babel-preset-react": "^6.23.0", "babel-preset-stage-2": "^6.22.0", "clean-webpack-plugin": "^0.1.15", "css-loader": "^0.26.1", "eslint": "^3.14.0", "eslint-config-airbnb": "^14.0.0", "eslint-loader": "^1.6.1", "eslint-plugin-html": "^2.0.1", "eslint-plugin-import": "^2.2.0", "eslint-plugin-jsx-a11y": "^3.0.2", "eslint-plugin-react": "^6.9.0", "exports-loader": "^0.6.4", "expose-loader": "^0.7.3", "extract-text-webpack-plugin": "^2.0.0-beta.5", "file-loader": "^0.9.0", "glob": "^7.1.1", "html-loader": "^0.4.5", "html-webpack-plugin": "^2.26.0", "ink-docstrap": "^1.3.0", "jsdoc-webpack-plugin-v2": "0.0.1", "less": "^2.7.2", "less-loader": "^2.2.3", "node-sass": "^4.3.0", "path": "^0.12.7", "postcss-loader": "^1.2.2", "sass-loader": "^4.1.1", "script-loader": "^0.7.0", "style-loader": "^0.13.1", "uglify-js": "git+https://github.com/mishoo/UglifyJS2.git#harmony", "url-loader": "^0.5.7", "vue-loader": "^11.1.4", "vue-template-compiler": "^2.2.4", "webpack": "^2.2.1", "webpack-dev-server": "^2.2.0"