模式（mode）

# 介绍

模式mode主要是告知webpack应该使用哪种模式下的内置优化方式进行打包，他是webpack的一个配置项。

它的可选项为三个 'none' | 'development' | 'production'，分别表示不设置，开发环境，生产环境，并且在不同的 环境下，webpack会启用不同的打包内置插件。

# 用法

可以在配置文件中配置该项

module.exports = {
  mode: 'production'
}

也可以在cli参数中传递

webpack --mode=production

这里我们由于后续会把开发环境和生产环境的配置分离，而且开发命令和生产命令会分开，理论上讲， 两种方式对我们都是可以的，这里可以根据自己的个人喜好，我们这里采用第二种配置方式。

采用第二中配置方式的话，我们就需要在package.json中定义两个命令，方便使用。如果你还不知道为什么可以在package.json 中配置命令的话，请自定去npm官网查看具体文档。

我们定义两条命令，一条开发命令，一条生产命令:

{
  "scripts": {
    "build": "webpack --mode=production",
    "dev": "webpack --mode=development"
  }
}

这样的话，我们想打开发的包就运行npm run dev，想打生产的包就运行npm run build，其实vue项目也是采用这种命名方式的。

可以发现，已经没有了警告，且文件正常打包了。

接下来，就让我们进行下一个配置项吧！