简介

​ mode（形式）是webpack4.0.0新增的设置，用来指定webpack运用对应形式的内置优化；它有三个可选形式：production、development、none；默以为production。

源码地点

演示

下面经由过程一段代码离别演示一个每个形式打包输出的文件内容：

第一步：编写进口文件和依靠代码

// webpack@4.32.2系列教程/demo02-mode/src/role.js
export default class Role {
  constructor(name, skill) {
    this.name = name;
    this.skill = skill;
  }
}

// webpack@4.32.2系列教程/demo02-mode/src/index.js
import 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.js
const 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'             // 运用默许优化项
});

// 启动webpack
compiler.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设置：

mode: development

mode: production

mode: none