webpack 多 spa 页面打包的问题

zhangsanshi commented 7 years ago

假设有 A、B、C、D 四个页面，A、B页面是按照路由进行按需加载，C、D无按需加载，同时A、B、C、D都引用了一些相同的代码。现在需要让A、B、C页面共享其公有代码(打包成 core.js)，D页面独立打包。

zhangsanshi commented 7 years ago

问题的解决方案是使用 CommonsChunkPlugin 这个毫无疑问，然后配置里面会写上

{
  name:  'core.js',
  chunks: ['A', 'B', 'C']
}

问题看似解决了，但是如果仔细观察打包后的文件，就会发现 core.js 为什么没有包含 A、B按需加载的代码，而且按需加载的代码的体积怎么有点大。查看文档可能就会发现，需要加一个配置

{
children: true,
}

然后再次运行，会发现出错了， children 和 chunks 不能一起存在。问题看起来陷入了死结。。。

zhangsanshi commented 7 years ago

解决方案：

[
new webpack.optimize.CommonsChunkPlugin({
 children: true,
}),
new webpack.optimize.CommonsChunkPlugin({
  name:  'core.js',
  chunks: ['A', 'B', 'C']
})
]

传入两个 CommonsChunkPlugin 实例，分别对其进行配置，再次运行，就会发现上述问题都解决了！！！

zhangsanshi / issue-blog

webpack 多 spa 页面打包的问题 #48