如何将 process.env.NODE_ENV 从 Gulp 传递到 Webpack？答案

【问题标题】：How to pass process.env.NODE_ENV from Gulp to Webpack?如何将 process.env.NODE_ENV 从 Gulp 传递到 Webpack？
【发布时间】：2017-02-14 09:12:36
【问题描述】：

我有一个 gulpfile，我在其中创建了一个 webpackDevServer 来实时更新我的 js 代码。我在 gulpfile 中设置了一个 process.env.NODE_ENV 变量，但由于某种原因 webpack 没有看到它——它是未定义的。

这是我gulpfile.js的相关部分：

gulp.task("watch", ["_set-env:dev"], function() {
    // modify default webpack configuration for Development Server
    var webpackDevConfig = Object.create(webpackConfig);
    webpackDevConfig.devtool = "eval";
    webpackDevConfig.debug = "true";

    new webpackDevServer(webpack(webpackDevConfig), {
        proxy: {
            "/api/*": {target: "http://localhost:8000", secure: false},
            "/static/*": {target: "http://localhost:8000", secure: false},
            "/media/*": {target: "http://localhost:8000", secure: false}
        }
    }).listen(8001, "localhost", function (err) {
        if (err) throw new gutil.PluginError("webpack-dev-server", err);
        gutil.log("[webpack-dev-server]", "http://localhost:8001" + webpackDevConfig.output.publicPath);
    });
});

gulp.task("_set-env:dev", function() {
    gutil.log("set-env", "ENV => development");
    genv({
        vars: {
            NODE_ENV: "development"
        }
    });
});

然后在 webpack 我检查它的值，它是未定义的：

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

const HtmlWebpackPlugin = require("html-webpack-plugin");
const ExtractTextPlugin = require("extract-text-webpack-plugin");
...
const environmentsFile = path.join(__dirname, "/environments.json");
const nodeModulesPath = path.join(__dirname, "/node_modules");
const bowerComponentsPath = path.join(__dirname, "/bower_components");

console.log("!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!");
console.log(process.env.NODE_ENV);

const webpackConfig = {
    entry: {
        app: ["app.js"]
    },

在控制台上我看到了：

$ gulp watch
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
undefined
[22:28:34] Using gulpfile ~/Documents/frontend/gulpfile.js
[22:28:34] Starting '_set-env:dev'...
[22:28:34] set-env ENV => development
[22:28:34] Finished '_set-env:dev' after 7.63 ms
[22:28:34] Starting 'watch'...

【问题讨论】：

标签： node.js gulp webpack environment-variables

【解决方案1】：

你的 gulpfile 顶部可能有这样的东西：

var webpackConfig = require('./webpack.config.js');

这意味着你的 webpack 配置会在_set-env:dev 任务运行之前进行评估。请记住：您的 gulpfile 仅定义任务。在评估整个 gulpfile 之前，任务本身不会运行。

您需要推迟要求您的 webpack 配置，直到在 _set-env:dev 任务运行后删除 gulpfile 顶部的行并将 require() 直接放入您的 watch 任务：

gulp.task("watch", ["_set-env:dev"], function() {
    // modify default webpack configuration for Development Server
    var webpackDevConfig = Object.create(require('./webpack.config.js'));

【讨论】：

非常感谢，斯文！我觉得这与我如何从 gulp 导入 webpack 配置有关，但不知道具体是什么。