素材牛VIP会员
webpack + React 问题: It looks like you're using a minified...
 16***50  分类:Node.js  人气:913  回帖:2  发布于6年前 收藏

相关依赖版本:

{
  "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
        }
    })]
};

问题重现

  1. npm run build

  2. npm start

  3. 地址栏输入:http://localhost:8888

  4. 报出警告

警告文字版

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") 
   }
})

但是无效.

附搜索的结果:

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

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

讨论这个帖子(2)垃圾回帖将一律封号处理……

Lv6 码匠
飞***e 产品经理 6年前#1

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

Lv4 码徒
Ro***ng Linux系统工程师 6年前#2

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

 文明上网,理性发言!   😉 阿里云幸运券,戳我领取