介绍模式（mode）是webpack4.0.0新增的一个配置，用于指定webpack内置的优化使用对应的模式；它有三种可选模式：production、development、none；默认是生产。源码地址选项说明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的值设置为节点。使用默认优化。演示下面是一段代码，演示了每种模式打包输出文件的内容：第一步：编写入口文件和依赖代码//webpack@4.32.2系列教程/demo02-mode/src/role。jsexport默认类Role{constructor(name,skill){this.name=name;this.skill=技能；}}//webpack@4.32.2系列教程/demo02-mode/src/index.jsimportRolefrom'./role'constrole=newRole('乔峰','降龙十八掌');console.日志（角色）；console.log（'process.env.NODE_ENV：'，process.env.NODE_ENV）；第二步：编写webpackConfigure&startwebpack//webpack@4.32.2系列教程/demo02-mode/scripts/build.jsconstwebpack=require('webpack');//创建编译器对象constcompiler=webpack({//modemode:webpack4.0.0新配置，用于指定webpack使用对应mode的内置优化。//mode:'development'//会设置process.env.NODE_ENV的值为development.EnableNamedChunksPlugin和NamedModulesPlugin。//mode:'production'//将process.env.NODE_ENV的值设置为production。启用FlagDependencyUsagePlugin、FlagIncludedChunksPlugin、ModuleConcatenationPlugin、NoEmitOnErrorsPlugin、OccurrenceOrderPlugin、SideEffectsFlagPlugin和UglifyJsPlugin。mode:'none'//使用默认优化项});//启动webpackcompiler.run((err,ifconstats)er=.error(err);return;}//输出编译成功信息console.log(stats.toString({colors:true}));});第三步：cd到demo02-mode文件夹，运行nodescripts/build.jsmode:nonemain.js文件内容打包输出方式：developmentmain.js文件内容打包输出方式：production内容概要main.js文件打包输出：可以看到每种模式，打包后输出的代码都不一样。我们通常使用开发模式进行开发，需要将代码发布到线上时使用生产模式。注意：上面说的process.env.NODE_ENV并不是Node.js的process.env.NODE_ENV运行环境变量，它实际上是DefinePlugin插件设置的webpack全局变量。配置模式其实可以理解为为webpack4.0.0提供一个语法糖。它的三个选项其实就是三套不同的webpack默认配置。以下是每种模式对应的webpack配置：mode:developmentmode:productionmode:none
