html-webpack-plugin 多页面,webpack4 坑收集：html-webpack-plugin在多页面时，无法将optimization.splitChunks提取的公共块，打包到页...

问题描述：

有2个页面index.html和product.html，用html-webpack-plugin和optimization.splitChunks的基本配置如下

{

template: 'src/html/' + name + '.html',

filename: (devMode ? '' : '../') + 'html/' + name + '.html',

chunks: ['common','jquery','index']

}

{

template: 'src/html/' + name + '.html',

filename: (devMode ? '' : '../') + 'html/' + name + '.html',

chunks: ['common','jquery','product']

}

optimization: {

splitChunks: {

chunks: 'all',

minSize: 30000,

minChunks: 1,

cacheGroups: {

vendor: {

test: /node_modules/, // 用于规定缓存组匹配的文件位置

name: 'vendor',

minSize: 30000,

priority: -10,//优先级

}

}

}

}

build后：index.html 页面并未引入index和product页面的公共块(index~product-795ac51aef2e85e2ec28.js?)，导致页面不能正常加载

解决办法：在html-webpack-plugin的bata版已经修复，请重新安装

npm install --save-dev html-webpack-plugin@next

然后，重新build，查看index.html 页面

页面已经自动引入公共模板，这个坑解决，我只想说：继续采坑

标签：index,product,webpack4,splitChunks,webpack,html,页面,name

来源： https://www.cnblogs.com/founderswitch/p/10481818.html