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>

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

  • 相关阅读:
    weka 文本分类(1)
    python 笔记1
    PAT乙级 1028. 人口普查(20)
    PAT乙级 1027. 打印沙漏(20)
    PAT乙级 1026. 程序运行时间(15)
    Eclipse常用快捷键
    MyBatis源码分析(各组件关系+底层原理
    springmvc异常处理
    Elasticsearch学习(一)————简单命令
    mybatis传入参数类型parameterType详解
  • 原文地址:https://www.cnblogs.com/founderswitch/p/10481818.html
Copyright © 2011-2022 走看看