Webpack - React Router V4 - 代码拆分异步 block 中的重复模块

Question

主要问题是在使用 react-routerV4 和 webpack 2 进行代码拆分时，我的模块分为几个 block ，我无法进入主要模块。

我的配置如下:

• 网页包 2.2.1
• react 路线 4.1.1

我正在使用 react-router v4 中的代码拆分 documentation

基本上，我不使用导入，但在路由配置上我有:像这样的东西:

import loadHome from 'bundle-loader?lazy&name=home-chunk!./pages/market/Home';
[
  {
    path: url1,
    component: props => <Bundle load={loadHome}>{Home => <Home {...props} />}</Bundle>,
    exact: true,
  },
  // other routes
  ]

这对代码拆分非常有效，我为每个路由获得了一个包，为我稍后可以拆分的 node_modules 获得了另一个包。

我的问题是，我有一个 node_module (react-slick) 在几个包中。所以我想把它放在主包中。

我的 webpack 配置是:

module.exports = {
  entry: [
    'whatwg-fetch',
    './src/scripts/index.js',
  ],
  output: {
    path: path.resolve(__dirname, 'src/build'),
    publicPath: '/build/',
    chunkFilename: "[name].js?[hash]",
    filename: '[name].js',
  },
  plugins: [
    new BundleAnalyzerPlugin(),
    new webpack.DefinePlugin({
      'process.env': {
        'NODE_ENV': '"production"'
      }
    }),
    new webpack.optimize.CommonsChunkPlugin({
      name: ['4_node-modules'],
      minChunks(module) {
       const context = module.context;
       return context && context.indexOf('node_modules') >= 0;
      },
    }),
    new webpack.optimize.CommonsChunkPlugin({
      name: ['3_react'],
      chunks: ['4_node-modules'],
      minChunks(module) {
        return module.context && /.*\/react.*/.test(module.context);
      },
    }),
    new webpack.optimize.CommonsChunkPlugin({
        children: true,
        minChunks: 2,
    }),
    new ExtractTextPlugin({
      filename: '[name].css',
      allChunks: true,
    }),
    new HtmlWebpackPlugin({
      filename: '../index.prod.html',
      template: 'src/template.index.prod.html',
      inject: false,
      hash: true,
    }),
  ],
};

根据文档，这应该可以解决问题:

new webpack.optimize.CommonsChunkPlugin({
    children: true,
    minChunks: 2,
}),

但是没有任何反应，我的 3 个包中仍然有“react-slick”。

有没有人知道发生了什么事？

感谢任何帮助 :) 谢谢!

Answer 1

我终于找到了解决方案；)

我这样做是为了帮助别人。

答案是:不指定 block 显然不是针对所有 block ，而是仅针对最后一个创建的 block 。

假设我们使用 react-router V4 创建了 2 个异步 block “home-chunk”和“welcome-chunk”。从中获取公共(public) block 的方法是在 webpack 配置文件中添加(在插件中):

new webpack.optimize.CommonsChunkPlugin( {
  name : 'common',
  chunks : ['home-chunk', 'welcome-chunk'],
  minChunks : 2,
}),

这将检查异步 block 中是否有公共(public)模块，如果有，则将它们放入公共(public) block 中。