【React】webpack + React 问题: It looks like you're using a minified...

Z时代
2024-01-10
分类：技术分享

相关依赖版本：

{
"name": "test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "npm run start:default",
"start:default": "webpack-dev-server --open --progress --colors --host localhost --port 8088 --inline --hot --config webpack.config.js",
"start:dev": "set NODE_ENV=development && webpack-dev-server --progress --colors --host localhost --port 8088 --inline --hot",
"start:prod": "set NODE_ENV=production && webpack-dev-server --progress --colors --host localhost --port 8088 --inline --hot",
"start:node": "node server.js",
"build": "webpack --config webpack.dll.config.js --progress"
},
"author": "",
"license": "ISC",
"dependencies": {
"antd": "^2.12.0",
"babel-core": "^6.25.0",
"babel-loader": "^7.1.1",
"babel-plugin-import": "^1.2.1",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"css-loader": "^0.28.4",
"history": "^4.6.3",
"less": "^2.7.2",
"less-loader": "^4.0.5",
"prop-types": "^15.5.10",
"react": "^15.6.1",
"react-dom": "^15.6.1",
"react-redux": "^5.0.5",
"react-router": "^3.0.0",
"react-router-redux": "^4.0.8",
"redux": "^3.7.2",
"style-loader": "^0.18.2",
"webpack": "^3.1.0",
"webpack-bundle-analyzer": "^2.9.0",
"webpack-dev-middleware": "^1.11.0",
"webpack-dev-server": "^2.5.1"
},
"devDependencies": {
"antd": "^2.12.0",
"assets-webpack-plugin": "^3.5.1",
"babel-core": "^6.25.0",
"babel-loader": "^7.1.1",
"babel-plugin-transform-object-assign": "^6.22.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"cross-env": "^5.0.5",
"extract-text-webpack-plugin": "^3.0.0",
"react": "^15.6.1",
"react-dom": "^15.6.1",
"webpack": "^3.1.0",
"webpack-bundle-analyzer": "^2.9.0",
"webpack-dev-server": "^2.5.1"
},
"babel": {
"presets": [
"es2015",
"react"
]
}
}

webpack.config.js

// 引入模块
const webpack = require("webpack");
const path = require("path");
// 引入打包文件束查看插件
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin;
// 提取样式插件
const ExtractTextPlugin = require("extract-text-webpack-plugin");
// 资源缓存
var AssetsPlugin = require("assets-webpack-plugin");
// 解析目录地址
const WEB = path.resolve(__dirname, "web"); // web目录
const BUILD = path.resolve(__dirname, "__build__"); // __build__目录
// 配置
let config = {
// 入口配置，支持 string|object|array，具体参考 https://doc.webpack-china.org/configuration/
entry: {
bundle: [WEB + "/index.js"]
},
// webpack 如何输出结果的相关选项
output: {
// 所有输出文件的目标路径 必须是绝对路径（使用 Node.js 的 path 模块）
path: BUILD,
filename: "[name].js",
// 「入口分块(entry chunk)」的文件名模板
chunkFilename: new Date().getTime() + "[id].chunk.js",
// 输出解析文件的目录，url 相对于 HTML 页面
publicPath: "/__build__/"
},
// devtool: "cheap-eval-source-map",
module: {
// 加载器
rules: [{
test: /\.js(x)*$/,
loader: "babel-loader",
exclude: "/node_modules/",
options: {
presets: ["es2015", "react", "stage-0"]
}
},
{
test: /\.css?$/i,
loader: ExtractTextPlugin.extract({
fallback: "style-loader",
use: ["css-loader"]
})
},
{
test: /\.less?$/i,
loader: ExtractTextPlugin.extract({
fallback: "style-loader",
use: ["css-loader", "less-loader"]
})
}]
},
// 插件
plugins: [
// 定义插件
new webpack.DefinePlugin({
"process.env": {
"NODE_ENV": JSON.stringify("production")
}
}),
// 热更新
new webpack.HotModuleReplacementPlugin(),
// 提升作用域
new webpack.optimize.ModuleConcatenationPlugin(),
// 文件去重（这个插件已经在webpack中移除了）
// new webpack.optimize.DedupePlugin(),
// 前置构建
new webpack.DllReferencePlugin({
context: __dirname,
manifest: require("./__build__/dll/vendor-manifest.json")
}),
// 提取样式
new ExtractTextPlugin({
filename: "bundle.min.css",
allChunks: true
}),
// 资源缓存
new AssetsPlugin({
filename: "./__build__/webpack.assets.js",
processOutput: function(assets) {
return "window.WEBPACK_ASSETS = " + JSON.stringify(assets);
}
}),
// 代码丑化
new webpack.optimize.UglifyJsPlugin({
minimize: true,
mangle: false,
output: {
comments: false
},
compress: {
warnings: false
}
}),
// 查看打包体积详情
new BundleAnalyzerPlugin({
// Can be `server`, `static` or `disabled`.
// In `server` mode analyzer will start HTTP server to show bundle report.
// In `static` mode single HTML file with bundle report will be generated.
// In `disabled` mode you can use this plugin to just generate Webpack Stats JSON file by setting `generateStatsFile` to `true`.
analyzerMode: "server",
// Host that will be used in `server` mode to start HTTP server.
analyzerHost: "127.0.0.1",
// Port that will be used in `server` mode to start HTTP server.
analyzerPort: 5088,
// Path to bundle report file that will be generated in `static` mode.
// Relative to bundles output directory.
reportFilename: "report.html",
// Module sizes to show in report by default.
// Should be one of `stat`, `parsed` or `gzip`.
// See 'Definitions' section for more information.
defaultSizes: "parsed",
// Automatically open report in default browser
openAnalyzer: true,
// If `true`, Webpack Stats JSON file will be generated in bundles output directory
generateStatsFile: false,
// Name of Webpack Stats JSON file that will be generated if `generateStatsFile` is `true`.
// Relative to bundles output directory.
statsFilename: "stats.json",
// Options for `stats.toJson()` method.
// For example you can exclude sources of your modules from stats file with `source: false` option.
// See more options here: https://github.com/webpack/webpack/blob/webpack-1/lib/Stats.js#L21
statsOptions: null,
// Log level. Can be 'info', 'warn', 'error' or 'silent'.
logLevel: "info"
})],
// 引入外部扩展（可以在index.html全局引入）
// key: import|require 的包名，value： 全局的变量
// 确保外部文件必须在 webpack 打包文件引入之前先引入
externals: {
lodash: "_"
}
};
module.exports = config;

webpack.dll.config.js

var path = require("path");
var webpack = require("webpack");
module.exports = {
entry: {
vendor: ["react", "react-dom", "react-router", "moment", 'antd']
},
output: {
path: path.resolve(__dirname + "/__build__/", "./dll"),
filename: "[name].dll.js",
library: "[name]"
},
plugins: [new webpack.optimize.ModuleConcatenationPlugin(), new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /zh-cn|en-gb/),
// 前置构建
new webpack.DllPlugin({
path: path.resolve(__dirname + "/__build__/", "./dll/[name]-manifest.json"),
name: "[name]"
}),
// 代码丑化
new webpack.optimize.UglifyJsPlugin({
minimize: true,
mangle: false,
output: {
comments: false
},
compress: {
warnings: false
}
})]
};

问题重现

npm run build

npm start

地址栏输入：http://localhost:8888

报出警告

警告文字版

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.

Warning: It looks like you're using a minified copy of the development build of React. When deploying React apps to production, make sure to use the production build which skips development warnings and is faster. See https://fb.me/react-minification for more details.

Google很多遍，都是建议在webpack.config.js中设置：

new webpack.DefinePlugin({
"process.env": {
NODE_ENV: JSON.stringify("production")
}
})

但是无效.

附搜索的结果：

https://github.com/facebook/r...

https://segmentfault.com/a/11...

回答

已解决，解决方法如下：

在 webpack.dll.config.js （以上问题已有列出此文件，具体内容参见问题）的 plugin 中，再添加

new webpack.DefinePlugin({
    "process.env": {
        "NODE_ENV": JSON.stringify("production")
    }
})

即可

我20年前学的高中英语，表示看懂这句话，无压力，楼主难道需要我们再帮你翻译一边？

英文里面说得其实蛮清楚的，第二段的意思是你环境变量设为“ production”，但是用的是development build的react，这样会导致效率慢，warning里面也有建议，说如果你想在“production”产品阶段使用，参考https://fb.me/react-minification，两段第一段是Redux,第二个是React的，意思都是拆不多，根据后面的给出的链接和建议再处理一下吧

以上是【React】webpack + React 问题: It looks like you're using a minified... 的全部内容，来源链接： utcz.com/a/72616.html