我有一个多页网站,其中包含SPA的部分页面。我们刚刚升级到Webpack V4,遇到了一些以前从未见过的新问题。
我们的页面始终包含 app.build.js 的脚本标签。该文件具有全局init,并导入我们的公共路径。它导入诸如Modernizr之类的内容并构建我们的网站导航。
此外,我们以每页为基础提供第二个JS文件,例如 account.build.js 。如果某些页面很简单,则它们没有第二个文件。他们仍然需要app.build.js来创建导航。
Webpack似乎不知道这种组合,因此在两个输出文件中有多余的块。它们都可能包含Modernizr测试等,并且所有这些都添加到了两个构建文件中,从而使它们大大膨胀。
我的问题是,您如何告诉Webpack全球范围内包括 app.build.js ???我们为供应商使用SplitChunks进行此操作,但是它与导入匹配,而不与条目文件名匹配。
我们现在还需要在每个条目文件中import './public-path';
,这并不理想。我希望在 app.build.js 中执行一次,并使其在全球范围内得到认可。
此处向Webpack提交了错误:https://github.com/webpack/webpack/issues/8842
答案 0 :(得分:0)
如果您要将所有重复项移到单个文件(commons.js
)中,而将所有
vendors.js
中的供应商文件,您可以指定多个缓存组。此commons.js
将包含在所有入口点重复的所有模块。
optimization: {
splitChunks: {
cacheGroups: {
vendors: {
test: /[\\/]node_modules[\\/]/,
name: 'vendors',
chunks: 'all'
},
commons: {
name: 'commons',
chunks: 'all',
minChunks: 2,
enforce: true,
},
}
}
}