Question

我很擅长使用React和Webpack，所以我可能做错了什么，但是当我使用-p production标记构建时，我的文件大小比我没有构建时大得多（3.26MB vs 2.23MB）

的package.json：

{
  "name": "myProject",
  "version": "0.0.1",
  "description": "",
  "main": "webpack.config.js",
  "dependencies": {
    "babel-loader": "^6.2.0",
    "babel-plugin-add-module-exports": "^0.1.2",
    "babel-plugin-react-html-attrs": "^2.0.0",
    "babel-plugin-transform-class-properties": "^6.3.13",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-preset-es2015": "^6.3.13",
    "babel-preset-react": "^6.3.13",
    "babel-preset-stage-0": "^6.3.13",
    "flux": "^2.1.1",
    "history": "^1.17.0",
    "react": "^0.14.6",
    "react-dom": "^0.14.6",
    "react-router": "^1.0.3",
    "webpack": "^1.12.9",
    "webpack-dev-server": "^1.14.1"
  },
  "devDependencies": {},
  "scripts": {
    "dev": "webpack-dev-server --content-base src --inline --hot",
    "build": "webpack",
    "build-p": "webpack -p"
  },
  "author": ""
}

webpack.config.js：

var debug = process.env.NODE_ENV !== "production";
var webpack = require('webpack');
var path = require('path');

module.exports = {
  context: path.join(__dirname, "src"),
  devtool: debug ? "inline-sourcemap" : null,
  entry: "./js/app.js",
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /(node_modules|bower_components)/,
        loader: 'babel-loader',
        query: {
          presets: ['react', 'es2015', 'stage-0'],
          plugins: ['react-html-attrs', 'transform-class-properties', 'transform-decorators-legacy'],
        }
      }
    ]
  },
  output: {
    path: __dirname + "/src/",
    filename: "app.min.js"
  },
  plugins: debug ? [] : [
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
  ],
};

Answer 1

我遇到了同样的问题，并通过删除“调试”解决了问题。来自webpack.conf.js的属性。在我开发时（而不是在构建生产包时），我使用-d标志调用webpack，因为这会自动添加调试属性。

我看到调试在你的配置中是有条件的，但至少它解决了我的问题。

通过Webpack进行反应 - 生产标志会增加文件大小

1 个答案: