简介
mode（模式）是webpack4.0.0新增的配置，用来指定webpack使用对应模式的内置优化；它有三个可选模式：production、development、none；默认为production。
| 选项 | 描述 |
|---|---|
| development | 通过DefinePlugin插件将 process.env.NODE_ENV 的值设为 development。启用 NamedChunksPlugin 和 NamedModulesPlugin。 |
| production | 通过DefinePlugin插件将 process.env.NODE_ENV 的值设为 production。启用 FlagDependencyUsagePlugin, FlagIncludedChunksPlugin, ModuleConcatenationPlugin, NoEmitOnErrorsPlugin, OccurrenceOrderPlugin, SideEffectsFlagPlugin 和 TerserPlugin. |
| none | 通过DefinePlugin插件将 process.env.NODE_ENV 的值设为 node。使用默认的优化项。 |
演示
下面通过一段代码分别演示一个每一个模式打包输出的文件内容：源码地址
第一步：编写入口文件和依赖代码
// webpack@4.32.2系列教程/demo02-mode/src/role.jsexport default class Role { constructor(name, skill) { this.name = name; this.skill = skill; }}// webpack@4.32.2系列教程/demo02-mode/src/index.jsimport Role from './role'const role = new Role('乔峰', '降龙十八掌');console.log(role);console.log('process.env.NODE_ENV: ', process.env.NODE_ENV);第二步：编写webpack配置 & 启动webpack
// webpack@4.32.2系列教程/demo02-mode/scripts/build.jsconst webpack = require('webpack');// 创建编译器对象const compiler = webpack({ // mode模式：webpack4.0.0新增配置，用来指定webpack使用相应模式的内置优化。 // mode: 'development' // 会将 process.env.NODE_ENV 的值设为 development。启用 NamedChunksPlugin 和 NamedModulesPlugin。 // mode: 'production' // 会将 process.env.NODE_ENV 的值设为 production。启用 FlagDependencyUsagePlugin, FlagIncludedChunksPlugin, ModuleConcatenationPlugin, NoEmitOnErrorsPlugin, OccurrenceOrderPlugin, SideEffectsFlagPlugin 和 UglifyJsPlugin. mode: 'none' // 使用默认优化项});// 启动webpackcompiler.run((err, stats) => { if (err) { console.error(err); return; } // 输出编译成功信息 console.log(stats.toString({ colors: true }));});第三步：cd到demo02-mode文件夹下，运行node scripts/build.js
mode: none 打包输出的main.js文件内容
mode:development 打包输出的main.js文件内容
mode:production 打包输出的main.js文件内容
小结： 可以看到每一种模式，打包后输出的代码都不一样，我们平时开发使用development模式，当代码需要发布上线时使用production模式。
注意： 上面说的process.env.NODE_ENV并不是Node.js的process.env.NODE_ENV运行环境变量，它其实是通过DefinePlugin插件设置的一个webpack全局变量。
配置
mode其实可以理解为webpack4.0.0 提供一个语法糖，它的三个可选项，其实就是三套不同的webpack默认配置而已，以下是每一种模式对应的webpack配置：