陌上寒

陌上寒个人博客

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 会自己去添加一些参数:

选项 描述
development 会将 process.env.NODE_ENV 的值设为 development。启用 NamedChunksPlugin 和 NamedModulesPlugin。
production 会将 process.env.NODE_ENV 的值设为 production。启用 FlagDependencyUsagePlugin, FlagIncludedChunksPlugin, ModuleConcatenationPlugin, NoEmitOnErrorsPlugin, OccurrenceOrderPlugin, SideEffectsFlagPlugin 和 UglifyJsPlugin.

再要具体详细的认知可以参见官方文档

参考链接:

Webpack 4.5:从入门到放弃

 

发表评论

电子邮件地址不会被公开。