主要问题是在使用 react-routerV4 和 webpack 2 进行代码拆分时,我有几个模块,我无法到达主要模块。
我的配置如下:
- 网页包 2.2.1
- 反应路线 4.1.1
我正在使用 react-router v4文档中的代码拆分
基本上,我不使用导入,但在路由配置上我有:像这样:
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”。
有没有人暗示发生了什么?
任何帮助表示赞赏:) 谢谢!