webpack4322系列教程02-mode

简介

​ 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.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