浅析webpack中mode的取值及不同取值的作用（摇树优化）

　　Mode 用来指定当前的构建环境是：production、development、还是none。设置 mode 可以使用 webpack 的内置函数，默认值是 production。

　　mode 的内置函数功能如下：

　　模式(mode)：提供 mode 配置选项，告知 webpack 使用相应模式的内置优化。

　　用法：只在配置中提供 mode 选项：

module.exports = {
    mode: 'production'
};

　　或者从 CLI 参数中传递：

webpack --mode=production

一、mode取值

1、development：会将 process.env.NODE_ENV 的值设为 development。启用 NamedChunksPlugin 和 NamedModulesPlugin。

// webpack.development.config.js
module.exports = {
+ mode: 'development'
- plugins: [
-  new webpack.NamedModulesPlugin(),
-  new webpack.DefinePlugin({ "process.env.NODE_ENV": JSON.stringify("development") }),
- ]
}
 

2、production：会将 process.env.NODE_ENV 的值设为 production。启用 FlagDependencyUsagePlugin, FlagIncludedChunksPlugin, ModuleConcatenationPlugin, NoEmitOnErrorsPlugin, OccurrenceOrderPlugin, SideEffectsFlagPlugin 和 UglifyJsPlugin。

// webpack.production.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()
- ]
}
 

　　production模式下会启用UglifyJsPlugin插件（移除未使用的内容和文件压缩）

二、mode取值的区别

　　分别用 production 和 development 打包，编译的区别如下：

1、development打包后，一些没有依赖的方法、变量、文件会保留；而 production 则会移除。

2、production 打包后，代码会进行压缩，比 development 的文件小。