webpack二刷之五、生产环境优化（1.环境配置 & 全局变量）

本文链接：https://blog.csdn.net/u012961419/article/details/107093944

生产环境优化

开发环境注重开发效率，生产环境注重运行效率。

开发环境所使用的soucre map和HMR等webpack特性会生成或向打包文件中添加一些生产环境用不到的内容。

针对这个问题，webpack4推出了 模式(mode) 。

它提供了不同模式下的预设配置。

其中 production 模式内部开启了很多通用的优化功能。

同时，webpack也建议开发者为不同的工作环境创建不同的配置。

不同环境下的配置

方式1：配置文件根据环境不同，导出不同的配置（中小型项目）

webpack配置文件可以导出一个返回配置对象的函数(env,argv) => { return {...} }。

函数接收两个参数：

env接收cli命令中的环境名（--env）参数

aegv是cli命令中的所有参数

如此，就可以在函数中根据env判断，对配置做调整。

也可以通过环境变量来判断。

这种方式只适合中小型项目，因为随着项目变得复杂，不同环境的配置也变得复杂起来，不方便在一个配置文件中去维护。

对于大型项目还是建议使用，一个环境对应一个配置文件的方式去维护。

方式2：一个环境对应一个配置文件（大型项目）

一般项目中会配置3个环境的配置文件。其中两个用来适配不同的环境(dev/development、prod/production)，另一个存放公共的配置(common/base)。

在dev和prod配置文件中，导入公共配置对象common并将其复制到当前导出的对象中，最后用当前环境的配置对象覆盖。

由于Object.assign()是浅拷贝，使用它来覆盖公共配置是不合适的。

可以使用webpack-merge模块完成合并webpack配置的需求，它内部自动处理合并的逻辑。

由于现在没有默认的配置文件（webpack.config.js），所以需要使用--config参数指定使用的配置文件。

例如：yarn webpack --config webpack.prod.js

可以将命令配置到package.json的scripts中。

DefinePlugin 插件注入全局成员

DefinePlugin 插件用于为代码注入全局成员。

webpack 4 的 production 模式下，默认会启用这个插件，并且向代码中注入了一个process.env.NODE_ENV的全局常量。

很多第三方的模块都是通过这个成员判断当前的运行环境，从而决定是否执行一些操作，例如：打印日志

DefinePlugin 插件接收一个对象，对象中的的key-value都会被注入到代码当中。

例如：

const webpack = require('webpack')
module.exports = {
	plugins: [
		new webpack.DefinePlugin({
			// 全局注入一个API地址
			API_BASE_URL: 'https://api.example.com',
      // value应是一个符合JS语法的代码片段
			// API_BASE_URL: '"https://api.example.com"'
			// API_BASE_URL: JSON.stringify('https://api.example.com')
		})
	]
}