node.js - 将环境变量从 gulp 注入(inject)到 webpack

Question

我有一个 gulpfile，我从中启动 webpack 捆绑。 webpack 配置定义了一个使用 process.env.NODE_ENV 的别名，如下所示

.
.
resolve: {
    modulesDirectories: ["node_modules", "js", "jsx"],
    extensions: ["", ".js", ".jsx"],
    alias: {
        config: path.join(__dirname, ('config.' + process.env.NODE_ENV + '.js'))
    }
}..

在 gulpfile 中，我有 2 个任务按顺序执行

1. set-env 使用gulp-env设置环境变量如下

   gulpEnv({
       vars: {
           NODE_ENV: 'dev'
       }
   });
   

2. webpack 依赖于前一个任务的任务，只有在第一个任务完成时才执行

这里变量似乎没有被正确注入(inject)。文件名被解析为 config.undefined.js。我的操作有问题吗？

Answer 1

我把我的方法改成了这样

网页包

var NODE_ENV = process.env.NODE_ENV;

var config = {
    .
    .
    resolve: {
        modulesDirectories: ["node_modules", "js", "jsx"],
        extensions: ["", ".js", ".jsx"],
        alias: {
            //<envt> will be injected by gulp
            config: config: path.join(__dirname, ('config.<envt>.js'))
        }
    }
    .
    .
    .
}

//If webpack is directly invoked with NODE_ENV, replacement will happen here
if (NODE_ENV) {
    config['resolve']['alias']['config'] = config['resolve']['alias']['config'].replace(/<envt>/, NODE_ENV);
}

module.exports = config;

gulp

1. 内部set-env而不是使用 gulp-env 进行设置，我简单地设置了一个全局变量 NODE_ENV='dev'
2. 内部webpack任务，我在做webpackConfig['resolve']['alias']['config'] = webpackConfig['resolve']['alias']['config'].replace(/<envt>/, NODE_ENV);

这对我有用