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?），導致頁面不能正常加載

<script src="../js/common-795ac51aef2e85e2ec28.js?795ac51aef2e85e2ec28"></script>
<script src="../js/jquery-795ac51aef2e85e2ec28.js?795ac51aef2e85e2ec28"></script>
<script src="../js/index-795ac51aef2e85e2ec28.js?795ac51aef2e85e2ec28"></script>

解決辦法：在html-webpack-plugin的bata版已經修復，請重新安裝

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

 

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

<script src="../js/common-795ac51aef2e85e2ec28.js?795ac51aef2e85e2ec28"></script>
<script src="../js/jquery-795ac51aef2e85e2ec28.js?795ac51aef2e85e2ec28"></script>
<script src="../js/index~product-795ac51aef2e85e2ec28.js?795ac51aef2e85e2ec28"></script>
<script src="../js/index-795ac51aef2e85e2ec28.js?795ac51aef2e85e2ec28"></script>

頁面已經自動引入公共模板，這個坑解決，我只想說：繼續采坑