[英]How to pass process.env.NODE_ENV from Gulp to Webpack?
I have a gulpfile, where I create a webpackDevServer to live-update my js code. 我有一个gulpfile,在其中创建了webpackDevServer来实时更新我的js代码。 I set a
process.env.NODE_ENV
variable in gulpfile, but for some reason webpack doesn't see it - it is undefined. 我在gulpfile中设置了一个
process.env.NODE_ENV
变量,但是由于某些原因,webpack看不到它-它是未定义的。
Here's the relevant piece of my gulpfile.js
: 这是我的
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"
}
});
});
Then in webpack I check its value and it is undefined: 然后在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"]
},
And on the console I see: 在控制台上,我看到:
$ 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'...
You probably have something like this close to the top of your gulpfile: 您可能在gulpfile的顶部附近有这样的内容:
var webpackConfig = require('./webpack.config.js');
That means your webpack configuration is evaluated before the _set-env:dev
task even runs. 这意味着您的webpack配置会在
_set-env:dev
任务运行之前进行评估。 Remember: your gulpfile only defines tasks. 请记住:您的gulpfile仅定义任务。 The tasks themselves aren't run until after the entire gulpfile has been evaluated.
直到评估完整个gulpfile后,任务本身才运行。
You need to defer requiring your webpack configuration until after the _set-env:dev
task has run by deleting the line at the top of your gulpfile and putting the require()
directly into your watch
task: 你需要推迟要求您的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'));
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.