React 开发工具认为我的网站处于开发模式

Question

我想看看使用所有内容的非开发版本提高了多少速度，所以我使用我的"生产"webconfig构建了我的网站。 但是开发工具仍然告诉我它处于"开发"模式

This page is using the development build of React. 
const merge = require("webpack-merge");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
const common = require("./webpack.common.js");
module.exports = merge(common, {
// Provides process.env.NODE_ENV with value production.
// Enables FlagDependencyUsagePlugin, FlagIncludedChunksPlugin,
// ModuleConcatenationPlugin, NoEmitOnErrorsPlugin, OccurrenceOrderPlugin,
// SideEffectsFlagPlugin and UglifyJsPlugin.
mode: "production",
// see https://webpack.js.org/configuration/optimization/
optimization: {
// minimize default is true
minimizer: [
// Optimize/minimize CSS assets.
// Solves extract-text-webpack-plugin CSS duplication problem
// By default it uses cssnano but a custom CSS processor can be specified
new OptimizeCSSAssetsPlugin({})
]
},
module: {
rules: [
{
test: /.(sa|sc|c)ss$/,
// only use MiniCssExtractPlugin in production and without style-loader
use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"]
}
]
},
plugins: [
// Mini CSS Extract plugin extracts CSS into separate files.
// It creates a CSS file per JS file which contains CSS.
// It supports On-Demand-Loading of CSS and SourceMaps.
// It requires webpack 4 to work.
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "[id].css"
}),
new BundleAnalyzerPlugin()
]
});

在我的包中.json

"scripts": {
"dev": "cross-env NODE_ENV=dev webpack-serve --config webpack.dev.js --open",
"prod": "cross-env NODE_ENV=prod  webpack -p --config webpack.prod.js",
"qa": "cross-env NODE_ENV=QA webpack --config webpack.prod.js"
},

Answer 1

我越来越相信你的问题源于在你的package.json中设置NODE_ENVprod。我认为您应该将其设置为production，或者允许webpack使用 webpack 配置中的mode选项在内部设置它。

react-scripts 包明确将此值设置为production用于在 github 项目中的 facebook/react 项目中构建和搜索NODE_ENV，将大量对production的检查作为值而不是prod。

这是 react-is 的索引.js文件，react 源代码中的许多其他项目都遵循相同的模式：

'use strict';
if (process.env.NODE_ENV === 'production') {
module.exports = require('./cjs/react-is.production.min.js');
} else {
module.exports = require('./cjs/react-is.development.js');
}

我会尝试将您的构建脚本更改为：

"prod": "cross-env NODE_ENV=production webpack -p --config webpack.prod.js",

甚至让webpack -p自动设置：

"prod": "cross-env webpack -p --config webpack.prod.js",