webpack DefinePlugin 的奇妙用处

这是一个简单的字符串替换插件，将我们所有经过 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>
        )
    }
}

执行结果是什么？

1. 弹出一个警告框
2. 控制台输出 2
3. 控制台输出 1 + 1
4. 控制台输出 1+ 1
5. 弹出一个警告框

通过结果我们很明显的知道 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