使用Webpack通过DefinePlugin传递NODE_ENV值
我想通过DefinePlugin使用webpack将NODE_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的有关。 请参阅下面的完整答案。
问题是因为你用错误的方式使用了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) })