使用 Webpack 准备 React App 生产

Question

我对使用 Webpack 还很陌生，我正在尝试将我的 React 应用程序在 ES6 中完成，使其达到可接受的生产就绪大小。输出文件仍然太大，而且 React 仍在输出警告（主要是关于生产文件）。

任何人都可以帮我解决我的配置文件中应该更新的问题吗？

这是我目前拥有的。

var webpack = require('webpack');
var PROD = JSON.parse(process.env.PROD_ENV || '0');

module.exports = {
  entry: "./app/App.js",
  output: {
    filename: "public/bundle.js"
  },
  module: {
    loaders: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: 'babel',
        query: {
          presets: ['react', 'es2015']
        }
      }
    ]
  },
  plugins: PROD ? [
    new webpack.optimize.UglifyJsPlugin({
      compress: { warnings: true }
    })
  ] : []
}

Answer 1

这是我的生产构建插件列表：

plugins: [
  new webpack.optimize.OccurenceOrderPlugin(),
  new webpack.optimize.DedupePlugin(),
  new webpack.DefinePlugin({
    'process.env': {
      'NODE_ENV': JSON.stringify('production')
    }
  }),
  new webpack.optimize.UglifyJsPlugin({
    minimize: true,
    compress: {
      unused: true,
      dead_code: true,
      warnings: false,
      screw_ie8: true
    },
    compressor: {
      warnings: false
    }
  })
]

此外，如果您发现应用程序仍然非常庞大，我使用的是 Webpack 包大小分析器 (npm.js link)。它会向您显示按大小排序的已用依赖项列表，它确实帮助我分析和丢弃了我实际上不需要的东西。

使用 Webpack 准备 React App 生产

Getting React App Production Ready with Webpack

production

reactjs

webpack