详细解读webpack配置之mode
众所周知，webpack主要的作用就是将项目当中的各种文件(.html、.css、.js、.json、.vue、图片......)全部进行整合打包，所以需要很多的依赖和处理方法，那么它的配置也将会有很多很多的东西....下面，我就将一些比较常用的列举出来，它们的用法以及配置...
module.exports = {
mode: '',
entry: '',
output: '',
plugins: [],
module: [],
resolve: '',
devServer: {}
}
1.mode (模式)
mode值分为三种：none / development / production
1.1none模式下的模块打包
在没有任何优化处理的情况下，按照webpack默认的情况下打包出模块，它会将模块打包至数组之中，调用模块的时候，就是直接调用模块在此数组中的一个序号，然后没有进行压缩、混淆之类的优化。
但是无论是在开发环境development下，还是在正式环境production下，这个代码都是不过关的，对于开发环境，此代码可读性太差，对于正式环境，此代码不够简洁，因此，为了减少一次重复操作，webpack4提供的development/production可以很大程度上帮我们做一大部分的事情，我们要做的，就是在这些事的基础上增加功能。
1.2development模式下，webpack做了哪些打包工作
development是告诉程序，我现在是开发状态，也就是打包出来的内容要对开发友好。在此mode下，就做了以下插件的事情，其他什么都没有做，所以这些插件可以省略。
//webpack.config.js
module.exports = {
mode:'development',
devtool:'eval',
plugins: [
new webpack.NamedModulesPlugin(),
new webpack.NamedChunksPlugin(),
new webpack.DefinePlugin({ "process.env.NODE_ENV": JSON.stringify("development") })
]
}
我们看看NamedModulesPlugin和NamedChunksPlugin这两个插件都做了啥，原本我们的webpack并不会给打包的模块加上名字，一般都是按照序号来，从0开始，然后加载第几个模块，这个对机器来说无所谓，查找载入很快，但是对于人脑来说就是灾难了，所以这个时候给各个模块加上姓名，便于开发的时候查找。
没有NamedModulesPlugin，模块就是一个数组，引用也是按照在数组中的顺序引用，新增模块都会导致序号的变化。
有了NamedModulesPlugin，模块都拥有了姓名，而且都是独一无二的key，不管新增减少多少模块，模块的key都是固定的
除了NamedmodulesPlugin，还有一个NamedChunksPlugin，这个是给配置的每个chunks命名，原本的chunks也是数组，没有名字。
NamedChunksPlugin其实就是提供了一个功能，你可以自定义chunks的名字，加入我在不同的包中有相同的chunk名，怎么办？这个时候就要在进行进一步的区分了，我们可以用所有的依赖模块名加上本模块名，因为Chunk.modules已经废弃了，现在用其他的方法来代替chunk.mapModules，然后重命名chunk的名字
new webpack.NameChunksPlugin( (chunk) => {
return chunk.mapMudoles( m => {
return path.relative(m.context,m.request);
}).join('_')
})
总结：development也就给我们省略了命名的过程，但是其他还是要我们自己加的。
1.3production
在正式版本中，所省略的插件们，如下所示，我们会一个个分析
//webpack.config.js
module.exports = {
mode:'production',
plugins: [
new UglifyJsPlugin(/*...*/),
new webpack.DefinePlugin({ "process.env.NODE_ENV": JSON.stringify("production") }),
new webpack.optimize.ModuleConcatenationPlugin(),
new webpack.NoEmitOnErrorsPlugin()
]
}
UglifyJsPlugin
我们第一个需要处理的就是混淆&压缩js了吧，这个时候就要请出UglifyJs了，他在webpack中的名字是
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
这样，就可以使用他了
不过 new UglifyJsPlugin(),这个插件我们可以在optimize中配置，效果是一样的，那么我们是不是不用在导入一个新的插件了，这样反而会拖慢webpack的打包速度
optimization: {
minimize: true
}
将插件去除，混淆压缩放入optimization，这样webpack速度快的起飞了，只有第一次打包会慢，之后在打包就快了
ModuleConcatenationPlugin
webpack.optimize.ModuleConcatenationPlugin()这个插件的作用是什么呢？官网文档上是这么描述的
记住，此插件仅适用于由webpack直接处理的ES6模块，在使用转译器(transpiler)时，你需要禁用对模块的处理(例如Babel中的modules选项)。
NoEmitOnErrorsPlugin
最后一个插件就是webpack.NoEmitOnErrorsPlugin()，这个就是用于防止程序报错，就算有错误也给我继续编译，很暴力的做法...
others
还有一些默认的插件配置，也就是可以不在plugin中引用的配置
OccurrenceOrderPlugin
webpack.optimize.OccurrenceOrderPlugin这个插件的作用是按照chunk引用次数来安排出现顺序，因为这让经常引用的模块和chunk拥有更小的id。
SideEffectsFlagPlugin
webpack.optimize.SideEffectsFlagPlugin()这个插件如果需要生效的话，需要两个条件，一个是导入的模块已经标记了sideEffect，即package.json中的sideEffects这个属性为false，第二个就是当前模块引用了次无副作用的模块，而且没有使用。那么在打包的时候，就不会将这个模块打包到文件中。