Webpack 4 Split Chunks Plugin を使用して、複数のベンダー バンドルを作成しようとしています。この場合、react/react-dom 用に 1 つのチャンクを作成し、react-router/react-router-dom 用に 1 つのチャンクを作成します。
とcacheGroups
のみが含まれreact
てvendor
いる場合、ビルドは期待どおりに機能します。バンドルの出力は次のとおりです。
- index
- react
- runtime
- vendors
同様に、cacheGroups のみがありrouter
、vendor
期待どおりに機能する場合。出力は次のとおりです。
- index
- router
- runtime
- vendors
どちらの場合でも、チャンクが作成されたときに、検査すると、それぞれのケースでreact
またはの正しいコードが表示されます。router
しかし...両方を含めると機能しません。この場合、router
チャンクのみが作成され、react
コードがインデックス(src)バンドルにプッシュされます。
前の cacheGroup の無効化を引き起こしている正規表現パターンに何か問題があると思われますか? どんな助けでも大歓迎です。
splitChunks の webpack 構成は次のとおりです。
splitChunks: {
cacheGroups: {
react: {
test: /[\\/]node_modules[\\/](react|react-dom)[\\/]/,
name: 'react',
chunks: 'all'
},
router: {
test: /[\\/]node_modules[\\/](react-router|react-router-dom)[\\/]/,
name: 'router',
chunks: 'all'
},
vendor: {
test(mod) {
// exclude anything outside node modules
if (!mod.context.includes('node_modules')) {
return false;
}
// exclude react and react-dom
if (/[\\/]node_modules[\\/](react|react-dom)[\\/]/.test(mod.context)) {
return false;
}
// exclude react-router and react-router-dom
if (/[\\/]node_modules[\\/](react-router|react-router-dom)[\\/]/.test(mod.context)) {
return false;
}
// return all other node modules
return true;
},
name: 'vendors',
chunks: 'all'
}
}
}