DefinePlugin插件用法理解
一、官方定义：
DefinePlugin
DefinePlugin 允许创建一个在编译时可以配置的全局常量。这可能会对开发模式和生产模式的构建允许不同的行为非常有用。如果在开发构建中，而不在发布构建中执行日志记录，则可以使用全局常量来决定是否记录日志。这就是 DefinePlugin 的用处，设置它，就可以忘记开发环境和生产环境构建的规则。
new webpack.DefinePlugin({
// Definitions...
});
用法
每个传进 DefinePlugin 的键值都是一个标志符或者多个用 . 连接起来的标志符。
- 如果这个值是一个字符串，它会被当作一个代码片段来使用。
- 如果这个值不是字符串，它会被转化为字符串(包括函数)。
- 如果这个值是一个对象，它所有的 key 会被同样的方式定义。
- 如果在一个 key 前面加了 typeof,它会被定义为 typeof 调用。
这些值会被内联进那些允许传一个代码压缩参数的代码中，从而减少冗余的条件判断。
new webpack.DefinePlugin({
PRODUCTION: JSON.stringify(true),
VERSION: JSON.stringify('5fa3b9'),
BROWSER_SUPPORTS_html5: true,
TWO: '1+1',
'typeof window': JSON.stringify('object'),
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
});
console.log('Running App version ' + VERSION);
if(!BROWSER_SUPPORTS_HTML5) require('html5shiv');When defining values for process prefer 'process.env.NODE_ENV': JSON.stringify('production')over process: { env: { NODE_ENV: JSON.stringify('production') } }. Using the latter will overwrite the process object which can break compatibility with some modules that expect other values on the process object to be defined.
注意，因为这个插件直接执行文本替换，给定的值必须包含字符串本身内的实际引号。通常，有两种方式来达到这个效果，使用 '"production"', 或者使用 JSON.stringify('production')。
二、个人分析
1、官网中说的“可以使用这个插件定义一些编译时的全局常量”
编译时这几个字很重要，webpack会根据配置文件将将入口文件解析、打包、转译为浏览器可识别的js文件最后输出到出口，而他转译的过程其实就是webpack编译过程，也就是官网说的编译时。
2、官网中说的“插件会直接替换文本”
> 在编译过程中（转译为浏览器可识别的js文件时），会将源文件中所有用到DefinePlugin中定义的常量的地方直接替换为对应的值文本，注意，是文本无论语义上是对象还是字符串还是函数，都直接作为文本替换过去。
示例1：
假设在配置文件中定义编译时全局常量 process.env.firstName
new webpack.DefinePlugin({
'process.env.firstName': JSON.stringify("ShuiTao")
});源文件index.js内容如下
console.log(process.env.firstName)最终转译后的js文件
console.log('ShuiTao')可以看到，在编译生成新js文件时，将process.env.firstName常量直接替换成了他对应的值文
示例2：
假设在配置文件中定义编译时全局常量 process.env.info
new webpack.DefinePlugin({ 'process.env.info': JSON.stringify({
name:'ShuiTao',
age:23
}) });源文件index.js内容如下
console.log(process.env.info)最终转译后的js文件
console.log({
name:'ShuiTao',
age:23
})可以看到，在编译生成新js文件时，将process.env.info常量直接替换成了他对应的值文本
示例3：
假设在配置文件中定义编译时全局常量 process.env.info
new webpack.DefinePlugin({ 'process.env.info': JSON.stringify({
name:'ShuiTao',
age:23
}) });源文件index.js内容如下
console.log(process.env);
console.log(process.env.info);最终转译后的js文件
console.log(process.env);
console.log({
name:'ShuiTao',
age:23
});可以看到，在编译生成新js文件时，将process.env.info常量直接替换成了他对应的值文本,而process.env没有被替换，因为没有在DefinePlugin中定义process.env
运行最终转译后的js文件时，process.env指向的是Node中的process，在process.env中找不到info属性，足以证明在DefinePlugin定义的process.env.info和Node的process没有任何关系，他只是一个在插件中定义的编译时的常量，编译后就已经被替换了，因此 理解清楚概念，他只是个编译时的常量，转译后就会被替换，只是恰好常量的名字是process.env.info
作者：水涛
本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！
