使用Webpack通过DefinePlugin传递NODE_ENV值

我想通过DefinePlugin使用webpackNODE_ENV值注入到我的代码中。 我或多或less地检查了一个相同的问题 ,但仍然无法实现。

具体来说,这是我的设置。

package.json

 "scripts": { "build": "rimraf dist && cross-env NODE_ENV=production webpack", "dev": "cross-env NODE_ENV=development && node webpack-dev-server.js" }, 

webpack.config.js

 "use strict"; /* requiring the modules */ const webpack = require("webpack"); const path = require("path"); /* defining the source and distribution paths */ const DIST_DIR = path.resolve(__dirname, "dist"); const SRC_DIR = path.resolve(__dirname, "src"); const DEVELOPMENT = process.env.NODE_ENV === "development"; const PRODUCTION = process.env.NODE_ENV === "production"; // const PRODUCTION = !!process.argv.find((element) => element === '--production'); // const DEVELOPMENT = !!process.argv.find((element) => element === '--development'); /* defining the entries*/ const productionEntries = { home: SRC_DIR + "/_home.js", about: SRC_DIR + "/_about.js", }; const developmentEntries = Object.assign({}, productionEntries, {webpackDevServer: ["webpack/hot/dev-server", "webpack-dev-server/client?http://localhost:8080"]}); const entries = PRODUCTION ? productionEntries : developmentEntries; /* defining the output */ const output = { filename: "[name].js", path: DIST_DIR, publicPath: "/dist/", pathinfo: true, library: "MyLibraryName" }; /* defining the plugins */ const plugins = PRODUCTION ? [ new webpack.optimize.OccurrenceOrderPlugin(), new webpack.optimize.AggressiveMergingPlugin(), new webpack.optimize.UglifyJsPlugin({comments: false}), ] : [ new webpack.HotModuleReplacementPlugin(), ]; plugins.push( new webpack.optimize.CommonsChunkPlugin({name: "vendor.bundle", minChunks: 2}), new webpack.DefinePlugin({ PRODUCTION: PRODUCTION, DEVELOPMENT: DEVELOPMENT, }) ); /* defining the modules -> rules -> loaders */ const modules = { rules: [ { test: /\.(js|jsx)$/, include: SRC_DIR, exclude: /node_modules/, loader: "babel-loader", options: { presets: ["react", ["es2015", {modules: false}], "stage-2"] } } ] }; /* building the webpack config object */ const config = { entry: entries, output: output, module: modules, plugins: plugins, devtool: "source-map", target: "web", stats: "verbose" }; /* exporting the webpack config */ module.exports = config; 

最后,在_about.js我有以下几点:

 // output after using: npm run dev console.log(process.env.NODE_ENV); // prints undefined console.log(PRODUCTION); // prints false console.log(DEVELOPMENT); // prints false if (module.hot) { module.hot.accept(); } 

问题是

  • 由于npm run dev成功(即,服务器启动,插件和条目adequtllyselect),我不明白为什么console.log(DEVELOPMENT)的输出是false ,为什么console.log(process.env.NODE_ENV)打印undefined
  • webpack.config.js执行的条件检查中, NODE_ENV值被正确select,否则插件,条目和开发服务器将无法工作。 但是,我不能使用DefinePlugin将该值传递给DefinePlugin
  • 我也尝试过EnvironmentPlugin ,结果相同。

我的问题 :请问,你能帮我理解事情的突破吗?


编辑1:

我尝试了以下没有任何改进:

 new webpack.DefinePlugin({ PRODUCTION: JSON.stringify(PRODUCTION), DEVELOPMENT: JSON.stringify(DEVELOPMENT) }) 

我在Windows 10上运行node.js


编辑2:

尝试:

 const DEVELOPMENT = process.env.NODE_ENV === "development"; const PRODUCTION = process.env.NODE_ENV === "production"; // with this inside plugins: new webpack.DefinePlugin({ "process.env.PRODUCTION": JSON.stringify(PRODUCTION), "process.env.DEVELOPMENT": JSON.stringify(DEVELOPMENT) }) 

和(使用npm run dev )我得到以下输出:

 console.log(process.env.PRODUCTION); // false console.log(process.env.DEVELOPMENT); // false console.log(process.env.NODE_ENV); // undefined console.log(PRODUCTION); // Uncaught ReferenceError: PRODUCTION is not defined console.log(DEVELOPMENT); // Uncaught ReferenceError: DEVELOPMENT is not defined 

没有改善不幸的。


编辑3:

我的devDependencies是:

 "devDependencies": { "babel-core": "^6.21.0", "babel-loader": "^6.2.10", "babel-preset-es2015": "^6.18.0", "babel-preset-react": "^6.16.0", "babel-preset-stage-2": "^6.18.0", "cross-env": "^3.1.4", "rimraf": "^2.5.4", "webpack": "^2.2.0-rc.4", "webpack-dev-server": "^2.2.0-rc.0" } 

编辑4 :(解决)

@Cleiton发现了这个问题。 这与npm脚本是如何使用cross-env构build的有关。 请参阅下面的完整答案。

       

网上收集的解决方案 "使用Webpack通过DefinePlugin传递NODE_ENV值"

问题是因为你用错误的方式使用了cross-env 。 它只改变envvariables的上下文,所以当你使用'&&'来运行webpack时,它已经消失了,webpack什么也看不到。

所以你必须写

 "scripts": { "build": "rimraf dist && cross-env NODE_ENV=production webpack", "dev": "cross-env NODE_ENV=development node webpack-dev-server.js" }, 

注意你已经写了“构build”脚本的权利。

另一个问题是关于如果你想在你的代码库中引用“process.env.PRODUCTION”,你应该写:

  new webpack.DefinePlugin({ "process.env.PRODUCTION": JSON.stringify(PRODUCTION), "proccess.env.DEVELOPMENT": JSON.stringify(DEVELOPMENT), }); 

DefinePlugin期望string,所以你需要JSON.stringify()传递给它的任何值。

 new webpack.DefinePlugin({ PRODUCTION: JSON.stringify(PRODUCTION), DEVELOPMENT: JSON.stringify(DEVELOPMENT) })