Webpack - React Router V4 - 非同期チャンクで重複モジュールを分割するコード

Question

主な問題は、react-routerV4でコード分割してからwebpack 2を実行する際に、メインモジュールに到達できない複数のチャンク。

私の構成は以下の通りです：

• のWebPACK 2.2.1
• が反応経路4.1.1

を私が反応し、ルータを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にバンドル。

誰でも何が起こっているのかを知っていますか？

ご協力ありがとうございました：ありがとうございます！

Answer 1

そして、私は最終的に解決策を得た;）

それが誰かを助けるかもしれないので、私はこれをしましょう。

答えは： チャンクを指定していない場合は、すべてのチャンクを対象とするのではなく、最後に作成されたチャンクのみを対象とします。

反応ルータV4では、2つの非同期チャンク 'home-chunk'と 'welcome-chunk'を作成しました。 それのうち、共通のチャンクを取得する方法は、（pluggins中）WebPACKの設定ファイルに追加することです：

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

これは、非同期チャンクで共通のモジュールがあるかどうかを確認し、もしそうなら、それらを配置します一般的なチャンクで