用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` optionbabel 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打包的时候会报错的。详见：https://juejin.im/entry/588ca3018d6d81006c237c85
解决的办法就是在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，目前不支持。参见：https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/384
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参见：https://github.com/webpack/extract-text-webpack-plugin/issues/50
六、用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的区分，详见：http://www.cnblogs.com/ihardcoder/p/5623411.html
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"[转] 那些在使用webpack时踩过的坑
原文地址：https://www.cnblogs.com/chris-oil/p/8947827.html