我创建了一个基本应用程序并将其部署用于生产。运行 webpack -p 并启动服务器后,我现在收到此控制台日志错误:
You are currently using minified code outside of NODE_ENV === 'production'. This means that you are running a slower development build of Redux. You can use loose-envify (https://github.com/zertosh/loose-envify) for browserify or DefinePlugin for webpack (http://stackoverflow.com/questions/30030031) to ensure you have the correct code for your production build.
这是我的 webpack.config.js 文件:
module.exports = {
entry: [
'./src/index.js'
],
output: {
path: __dirname,
publicPath: '/',
filename: 'bundle.js'
},
module: {
loaders: [{
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['react', 'es2015', 'stage-1']
}
}]
},
resolve: {
extensions: ['', '.js', '.jsx']
},
devServer: {
historyApiFallback: true,
contentBase: './'
}
};
我对 React 和 Webpack 特别陌生。如果有人能指出问题所在并帮助我理解 webpack(这非常令人困惑),那么我将永远感激不已!
编辑:
我添加了 webpack 插件并运行 NODE_ENV=生产 webpack -p
并在终端中收到此错误:
/Users/Joseph/workspace/weather-fcc/webpack.config.js:27
new webpack.DefinePlugin({
^
ReferenceError: webpack is not defined
at Object.<anonymous> (/Users/Joseph/workspace/weather-fcc/webpack.config.js:27:9)
at Module._compile (module.js:570:32)
at Object.Module._extensions..js (module.js:579:10)
at Module.load (module.js:487:32)
at tryModuleLoad (module.js:446:12)
at Function.Module._load (module.js:438:3)
at Module.require (module.js:497:17)
at require (internal/module.js:20:19)
at requireConfig (/usr/local/lib/node_modules/webpack/bin/convert-argv.js:96:18)
at /usr/local/lib/node_modules/webpack/bin/convert-argv.js:109:17` FWIW my webpack version is 1.12.9
最佳答案
Webpack 4 更新
如果您使用的 webpack >= 4,则可以将 mode
设置为 生产
。这将自动将 NODE_ENV
定义为 生产
,而无需使用定义插件。 https://webpack.js.org/concepts/mode/#mode-production .
webpack 似乎还更新了 -p
标志,以自动将 process.env.NODE_ENV
定义为捆绑代码中的 生产
(感谢@x-yuri 指出了这一点)。因此,虽然下面的答案现在是不必要的,但我将其保留下来以供引用,也作为 webpack 定义插件如何工作的解释。
原始答案+解释
TLDR:使用webpack define plugin将 process.env.NODE_ENV
设置为生产环境。
长版:
React、Redux 和许多其他 JS 库都包含额外的验证和错误日志记录,使开发变得更加容易。但是,您显然不希望在生产中使用它,因为这会使您的代码库更大且速度更慢。这些检查通常包含在如下所示的语句中:
if (process.env.NODE_ENV !== 'production') {
// do development checks
}
您收到的错误是 Redux 告诉您,尽管您已经缩小了代码,但 process.env.NODE_ENV
未设置为 生产
,因此开发检查仍然存在。要解决此问题,您需要使用 webpack define plugin将 process.env.NODE_ENV
设置为生产环境。
var webpack = require('webpack');
module.exports = {
entry: [
'./src/index.js'
],
output: {
path: __dirname,
publicPath: '/',
filename: 'bundle.js'
},
module: {
loaders: [{
exclude: /node_modules/,
loader: 'babel',
query: {
presets: ['react', 'es2015', 'stage-1']
}
}]
},
resolve: {
extensions: ['', '.js', '.jsx']
},
devServer: {
historyApiFallback: true,
contentBase: './'
},
plugins: [
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
}),
]
};
请注意,我将 process.env.NODE_ENV 的值定义为运行 webpack 时为您设置的值。因此,要生成生产包,您需要运行 NODE_ENV=development webpack -p
,而不仅仅是 webpack -p
。这会将您的包中的任何 process.env.NODE_ENV
实例替换为 product
。所以我上面显示的检查现在看起来像这样:
if ('production' !== 'production') {
// do development checks
}
压缩器足够聪明,可以检测到 if 语句中的代码永远不会发生,并将其从您的生产包中删除。因此,您可以两全其美:更好的开发体验,并且生产包中没有额外的代码:)
关于reactjs - 您当前正在使用 NODE_ENV === 'production' 之外的精简代码。这意味着您正在运行较慢的 Redux 开发版本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43694367/