Webpack Define Plugin

一、Define Plugin

Define Plugin的作用是代码为注入全局成员，production模式下，这个插件默认会被启用，并且往我们代码中注入了一个process.env.NODE_ENV这样的一个常量，很多第三方模块都是通过这个常量去判断运行环境，从而去决定是否执行例如打印日志这样的操作。

尝试使用Define Plugin

// webpack.config.js
const webpack = require("webpack")

module.exports = {
    mode:"none",
    entry:"./src/main.js",
    output:{
        filename:"bundle.js"
    },
    plugins:[
        new webpack.DefinePlugin({
            API_BASE_URL:"https://api.example.com"
        })
    ]
}

// main.js
console.log(API_BASE_URL);

执行打包，查看bundle.js

我们发现，Define Plugin其实就是把我们注入成员的值直接替换到了代码当中。因为我们注入的API_BASE_URL的值是字符串https://api.example.com，这里面没有引号，就会有语法上的错误。

其实Define Plugin的设计并不是只是帮我们替换一个数据进来，我们这所传递的字符串内容它要求的实际上是一个JS代码片段。

所以我们这样传是不对的，我们因该在引号里再传入一个字符串，字符串的内容就是我们的字面量语句，如果需要注入其他的代码也是可以的。

API_BASE_URL:`"https://api.example.com"`

也可以通过JSON.stringify的方法将这个值转换成表示这个值的代码片段

API_BASE_URL:JSON.stringify("https://api.example.com")

再次执行打包