defineplugin webpack_javascript – 通过DefinePlugin使用Webpack传递NODE_ENV值

我试图通过DefinePlugin使用webpack将NODE_ENV值注入我的代码中.我或多或少地检查了一个

identical question,但仍然无法让它工作.

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

在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成功运行(即,服务器启动并且插件和条目被选中),我不明白为什么console.log(DEVELOPMENT)的输出为false,以及为什么console.log(process.env) .NODE_ENV)打印未定义.

>在webpack.config.js中执行的条件检查中,正确选择NODE_ENV值,否则插件,条目和开发服务器将无法工作.但是,我无法使用DefinePlugin将该值传递给_about.js.

>我也尝试过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发现了这个问题.它与使用cross-env构建npm脚本的方式有关.请参阅下面的完整答案.