4.7.1 实现原理

4.7.1 实现原理
问题一：实现原理？

原理是借助于环境变量的值去判断执行哪个分支。

当你的代码中出现了使用process模块的语句时，Webpack 就自动打包进 process 模块的代码以支持非 Node.js 的运行环境。 当你的代码中没有使用 process 时就不会打包进 process 模块的代码。这个注入的 process 模块作用是为了模拟 Node.js 中的 process，以支持上面使用的process.env.NODE_ENV === 'production'语句。
在构建线上环境代码时，需要给当前运行环境设置环境变量NODE_ENV = 'production'，Webpack 相关配置如下：

const DefinePlugin = require('webpack/lib/DefinePlugin');

module.exports = {
plugins: [
new DefinePlugin({
// 定义 NODE_ENV 环境变量为 production
'process.env': {
NODE_ENV: JSON.stringify('production')
}
}),
],
};

注意在定义环境变量的值时用JSON.stringify包裹字符串的原因是环境变量的值需要是一个由双引号包裹的字符串，而JSON.stringify('production')的值正好等于'"production"'。

执行构建后，你会在输出的文件中发现如下代码：

if (true) {
console.log('你正在使用线上环境');
} else {
console.log('你正在使用开发环境');
}

定义的环境变量的值被代入到了源码中，process.env.NODE_ENV === 'production'被直接替换成了true。 并且由于此时访问 process 的语句被替换了而没有了，Webpack 也不会打包进 process 模块了。

DefinePlugin 定义的环境变量只对 Webpack 需要处理的代码有效，而不会影响 Node.js 运行时的环境变量的值。

通过 Shell 脚本的方式去定义的环境变量，例如NODE_ENV=production webpack，Webpack 是不认识的，对 Webpack 需要处理的代码中的环境区分语句是没有作用的。

也就是说只需要通过 DefinePlugin 定义环境变量就能使上面介绍的环境区分语句正常工作，没必要又通过 Shell 脚本的方式去定义一遍。

如果你想让 Webpack 使用通过 Shell 脚本的方式去定义的环境变量，你可以使用 EnvironmentPlugin，代码如下：

new webpack.EnvironmentPlugin(['NODE_ENV'])

以上这句代码实际上等价于：

new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
})