webpack4系列文章-（2）mode(模式)

提供 mode 配置选项，告知 webpack 使用相应模式的内置优化。

这个属性是在 Webpack4.0 之后新增的内容，目的就是减少部分属性的填写，使 Webpack 更容易上手，无形中减少了一些配置。官网链接地址

mode支持三种选择模式：

1. production 生产模式
2. development开发模式
3. none不使用任何模式，但是会有一个 warning

默认情况下webpack是使用的production 生产模式。

development 模式下，将侧重于功能调试和优化开发体验，包含如下内容：

1. 浏览器调试工具
2. 开发阶段的详细错误日志和提示
3. 快速和优化的增量构建机制

production 模式下，将侧重于模块体积优化和线上部署：

1. 开启所有的优化代码
2. 更小的 bundle 大小
3. 去除掉只在开发阶段运行的代码
4. Scope hoisting 和 Tree-shaking
5. 自动启用 uglifyjs 对代码进行压缩

这里使用 process.env.NODE_ENV 来判断当前是什么模式

关于 process：

process.env.NODE_ENV，其实这里的 process 就是一个全局变量，提供有关信息，控制当前 Node.js 进程。作为一个对象，它对于 Node.js 应用程序始终是可用的，故无需使用 require()。

之后的 process.env 就是返回当前项目所在环境的一些信息，是一个对象。当然了，你也可以对这个对象进行一些修改，比方说 process.env.foo = ‘bar’，这些操作其实都是可以的。 那么现在的 process.env.NODE_ENV 其实就是返回当前对象的到底是在生产环境还是在开发环境

const webpack = require('webpack');
const env = process.env.NODE_ENV || 'production';

const config = {
    mode: env
}

module.exports = config;

判断完当前生产环境是什么之后，Webpack 会自己去添加一些参数：

参考链接：

Webpack 4.5：从入门到放弃

• webpack 中文网
• webpack GitHub
• webpack-cli GitHub
• webpack-serve GitHub
• webpack-dev-server GitHub