跳到主要内容

DefinePlugin

2023年12月24日
柏拉文
越努力，越幸运

一、认识​

DefinePlugin 用来设置模块内的全局变量。由上可知，通过cross-env可以设置node环境的process.env.NODE_ENV值，那么可以通过DefinePlugin将process.env.NODE_ENV传递给各个模块。

二、安装​

安装 cross-env 依赖

yarn add cross-env -S

三、配置​

3.1 package.json​

package.json 命令行配置

{
"scripts": {
    "dev": "cross-env mode=dev webpack server --config ./webpack.config.js",
    "build": "cross-env mode=prod webpack build --config ./webpack.config.js"
},
}

3.2 webpack.config.js DefinePlugin​

webpack.config.js 配置 webpack.DefinePlugin ,将 process.env.mode 环境变量传递给浏览器

const Path = require("path");
const webpack = require("webpack");

module.exports = {
………………
plugins: [
    new webpack.DefinePlugin({
    "process.env.NODE_ENV": JSON.stringify(process.env.mode),
    }),
],
};

3.3 webpack.config.js optimization​

webpack.config.js 配置 optimization : 如果我们通过 webpack.DefinePlugin 更改 process.env.NODE_ENV 的值，会导致process.env.NODE_ENV 的前后变化冲突报错！这是因为webpack 首先会读取 webapck.config.js 中的 mode 值，将 mode 值传递给process.env.NODE_ENV ,如果后续还要改变process.env.NODE_ENV 的值，那么会发生冲突。所以我们需要配置 optimization ,让 webpack 不会自动读取 webpack.config.js 中的 mode 给 process.env.NODE_ENV 赋值

optimization: {
nodeEnv: false,
}

3.4 webpack.config.js 完整配置​

webpack.config.js 完整配置如下:

const Path = require("path");
const webpack = require("webpack");

module.exports = {
optimization: {
    nodeEnv: false,
},
plugins: [
    new webpack.DefinePlugin({
    'process.env.NODE_ENV':JSON.stringify(process.env.mode)
    }),
],
};

四、效果​

index.js 模块文件中使用 process.env.NODE_ENV(换成其他变量也可以呦)

console.log(process.env.NODE_ENV)