问题描述: 有2个页面index.html和product.html,用html-webpack-plugin和optimization.splitChunks的基本配置如下{template:'src/html/'+name+'.html',filename:(devMode?'':'../')+'html/'+name+'.h

问题描述:

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

 有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>

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

 

转载请说明出处
知优网 » webpack4 坑收集:html-webpack-plugin在多页面时,无法将optimization.splitChunks提取的公共块,打包到页面中

发表评论

您需要后才能发表评论