zoukankan      html  css  js  c++  java
  • 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>

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

  • 相关阅读:
    IOS Xcode编译项目-报错“ld: library not found for -XX”
    ios中关键词weak,assign,copy.strong等的区别
    iOS 控件
    iOS图片处理
    iOS 音频
    C语言文件操作
    iOS 删除相册中照片--来自简书
    ios sourecTree
    ios音频处理
    编码格式简介
  • 原文地址:https://www.cnblogs.com/founderswitch/p/10481818.html
Copyright © 2011-2022 走看看