环境: webpack4.6 + html-webpack-plugin 多页面多入口

经多次研究,稍微靠谱可用的配置

    optimization: {
splitChunks: {
minSize: 30000,
cacheGroups: {
common: {
chunks: "initial",
minChunks:3,
name: "common",
enforce: true
}
}
}
},

注意name这个属性,是提取出来的块的名称,不完美的是,还要在html-webpack-plugin 的 chunks中加载

参考资料:https://www.jianshu.com/p/3066d96aec8b

记webpack下提取公共js代码的方法的更多相关文章

  1. webpack提取公共js代码

    webpack打包js代码与提取公共js代码分析 webpack提取公共js代码示例 一.分析 webpack默认打包js代码时,是将从入口js模块开始,将入口js模块所依赖的js以及模块逐层依赖的模 ...

  2. webpack CommonsChunkPlugin 提取公共代码

    1.项目结构 2.部分代码 module.js console.log('module.js'); index文件夹下的index.js require('../module.js'); consol ...

  3. webpack散记---提取公共代码

    (1)作用: 减少代码冗余 提高加载速度 (2)来源 commonsChunkPlugin webpack.optimize.CommonsChunkPlugin (3)配置 { plugins:[ ...

  4. webpack配置提取公共代码

    公共代码提取功能是针对多入口文件的: 背景:在pageA.js和pageB.js中分别引用subPageA.js和subPageB.js webpack.config.js文件: var path = ...

  5. 记webpack下进行普通模块化开发基础配置(自动打包生成html、多入口多页面)

    写本记时(2018-06-25)的各版本 "webpack": "^4.6.0"  //可直接使用4x以上的开发模式,刷新很快 "webpack-de ...

  6. 记webpack下引入vue的方法(非.vue文件方式)

    直接script引入下载静态的vue.js文件则最后用copy-webpack-plugin复制到一样的目录即可 使用npm安装的vue无法直接用 import vue from "vue& ...

  7. $.ajax 在请求没有完成,是可以往下继续执行js代码的

    $.ajax({ url:url, data:{}, success:function(arr) { var varHtml='<option value="" checke ...

  8. 【微信小程序】 引用公共js里的方法

    一个小程序页面由四个文件组成,一个小程序页面的四个文件具有相同路径与文件名,由此我们可知一个小程序页面对应着一个跟页面同名的js文件.可是当有些公共方法,我们想抽离出来成为一个独立公共的js文件.我们 ...

  9. angularJS入门小Demo【简单测试js代码的方法】

    1.首先建立一个文件夹 demo, 2.在其中建立一个文本文档,改名为 demo-1.html, 3.把html中要引入的 js 文件拷贝到 demo目录下, 4.然后用 Notepadd++ 编辑刚 ...

随机推荐

  1. Android webview背景设置为透明无效 拖动时背景闪烁黑色

    Adndroid 2.X的设置 webview是一个使用方便.功能强大的控件,但由于webview的背景颜色默认是白色,在一些场合下会显得很突兀(比如背景是黑色). 此时就想到了要把webview的背 ...

  2. simhash-- 一种文档去重的算法

    最早看数学之美的时候,书中就提到了这个算法,当时没有做过相关地工作,没什么具体的印象.一年前转岗时面试时别人提到了这个算法,知道了simhash可以用来解决网页等海量数据的去重问题,很高效. 然后自己 ...

  3. java之JDBC学习总结

    以前一直以为jdbc是很高大上的东西,没想到今天学了jdbc,惊喜来了,just a tool!当然工具是用来帮助人们学习和提供方便的,所以总结了一下,也就是简单的三板斧: first :加载驱动 t ...

  4. ES6学习笔记(四):异步操作

    Promise Promise三种状态 pending.resolved.rejected 使用语法 var promis = new Promise(function(resolve,reject) ...

  5. vue中的minix

    minix 是个什么东西, 就是混合,把你混合给我 浅显表述就是 你说 : ‘我叫李四’, 我说 : ‘我叫张三’, 然后把你 混合给我, 就成了 我说 : ‘我叫张三我叫李四’, 所有解说都在例子里 ...

  6. Day24-KindEditor基本使用和文件操作2

    KindEditor是一套开源的HTML可视化编辑器,主要用于让用户在网站上获得所见即所得编辑效果,兼容IE.Firefox.Chrome.Safari.Opera等主流浏览器. 1. 准备 2. 写 ...

  7. mysql主主同步设置

    mysql主主同步设置 主主同步设置是同等的地位,所以以下操作在两台机器上都需要进行而且操作是相同的. 服务器 服务器代号 IP hostname A 192.168.70.128 Debian1 B ...

  8. java基础基础总结----- Math(随机数)

    前言:math类中感觉最好玩的应该就是随机数 代码: package com.day13.math; import java.util.Random; /** * 类说明 :Math * @autho ...

  9. python的类的继承-接口继承-归一化设计

    1.先在子类本身找,如果子类没有,会去父类找 class Dad: '这个是爸爸类' money=10#Dad类的数据属性 def __init__(self,name): print("爸 ...

  10. Go 语言编程规范

    1. gofmt 命令 大部分的格式问题可以通过 gofmt 来解决,gofmt 自动格式化代码,保证所有的 go 代码与官方推荐的格式保持一致,所有格式有关问题,都以gofmt的结果为准.所以,建议 ...