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>

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

 

转载于:https://www.cnblogs.com/founderswitch/p/10481818.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值