这是一个简单的字符串替换插件，将我们所有经过 webpack 打包的 js 文件的对应的字符串都替换为我们在这个插件中指定的字符串。DefinePlugin 允许创建一个在编译时可以配置的全局常量。
首先我们的在 webpack.config.js 里面进行配置一下：
const webpack = require('webpack');
plugins: [
new webpack.DefinePlugin({
TWO_0 : "1+1",
TWO_1 : "'1+1'",
TWO_2 : JSON.stringify("1+1"),
"弹窗一下": "alert('我弹窗了')"
})
],
注意注意：webpack.DefinePlugin 里面的 key 在组件里面可以直接作为变量使用。这时候我们在一个组件里面例如在 App 组件里面进行调试：
import React, { Component } from "react";
export default class App extends Component {
constructor(){
super()
}
render() {
弹窗一下
console.log(TWO_0)
console.log(TWO_1)
console.log(TWO_2)
return (
<div>
<h1>
{弹窗一下}
</h1>
</div>
)
}
}
执行结果是什么？
- 弹出一个警告框
- 控制台输出 2
- 控制台输出 1 + 1
- 控制台输出 1+ 1
- 弹出一个警告框
通过结果我们很明显的知道 webpack.DefinePlugin 配置里面的值，如果是只有一层引号的话会直接执行掉，这时候值作为表达式和变量使用，但是如果我们想要字符串，不让 1 + 1 执行的话，两种办法，一："'1 + 1'"或'"1 + 1"'。二：JSON.stringify('1 + 1')，这就叫做环境变量的值必须是由双引号包裹的字符串。
DefinedPlugin 定义的环境变量只对 webpack 需要处理的代码有效，不会影响 nodejs 运行的环境变量。
常见的应用场景：
- 「生产/开发」构建中使用不同的服务 URL
new webpack.DefinePlugin({
'SERVICE_URL': JSON.stringify("http://dev.example.com")
})
重点 对于 webpack3 以下的低版本充当 webpack4 的 mode。用来指定 webpack 的打包环境。
new webpack.DefinePlugin({
"process.env.NODE_ENV":JSON.stringify("production")
})
老版本的 "process.env.NODE_ENV":JSON.stringify("production")的作用：
- process 是 node 的全局变量，并且 process 有 env 这个属性，但是没有 NODE_ENV 这个属性。
-
webpack4 以上版本：通过设置 mode ，process.env.NODE_ENV会自动得到值。
- webpack3 或者以下 就的 通过 webpack 自带的一个插件 DefinePlugin 完成设置工作，采用这种方式设置的时候，值对应的格式必须是"'env'"这种格式，所以会JSON.stringify 进行转换。这时候的
"process.env.NODE_ENV":JSON.stringify("production")就相当于 webpack4 的 mode 模式。
理解webpack中的process.env.NODE_ENV
