Question

我正在尝试使用webpack对我的反应应用程序进行分块，但没有任何内容加载，并且它表示vendor.js表示0字节。我究竟做错了什么？我认为我的index.html有问题。 vendor.js和index.js都位于src文件夹中。我已经尝试过这个，但没有运气https://github.com/webpack/webpack/issues/368

的WebPack

var webpack = require('webpack');

module.exports = {
  entry: {
    app: './src/index.js',
    vendor: './src/vendor.js'
  },
  output: {
    path: __dirname,
    publicPath: '/',
    filename: '[name].js'
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin('vendor.js')
  ],
  module: {
    loaders: [{
      exclude: /node_modules/,
      loader: 'babel',
      query: {
        presets: ['react', 'es2015', 'stage-1']
      }
    }]
  },
  resolve: {
    extensions: ['', '.js', '.jsx']
  },
  devServer: {
    historyApiFallback: true,
    contentBase: './'
  }
};

的index.html

<!DOCTYPE html>
<html>
  <head>
     <link rel="stylesheet" href="/style/style.css">
  </head>
  <body>
    <div id="app"></div>
  </body>
  <script src="/bundle.js"></script>

</html>

Answer 1

您应该通过导入将所有常见依赖项添加到vendor.js，例如jquery，lodash，post-css，jss或您正在使用的任何其他人。

因为你没有这样做可能是因为你的vendor.js文件大小为0字节。

将CommonsChunkPlugin更改为

new webpack.optimize.CommonsChunkPlugin({
      name : 'vendor',
 }),

您还需要更改index.html

因为你的webpack配置中有

  output: {
    path: __dirname,
    publicPath: '/',
    filename: '[name].js'
  },

这里

filename: '[name].js'

表示文件将由webpack基于条目名称生成app.js和vendor.js

<!DOCTYPE html>
<html>
  <head>
     <link rel="stylesheet" href="/style/style.css">
  </head>
  <body>
    <div id="app"></div>
  </body>
  <script src="/vendor.js"></script>  
  <script src="/app.js"></script>
</html>

Answer 2

将new webpack.optimize.CommonsChunkPlugin('vendor.js')更改为 new webpack.optimize.CommonsChunkPlugin('vendor','vendor.js', Infinity)

或更好的是new webpack.optimize.CommonsChunkPlugin('vendor','vendor.[chunkhash].js', Infinity)

我建议迁移到Webpack 2. Refer migrating guide

为什么React Chunking不起作用？

2 个答案: