webpack@4.32.2研究筆記【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