在webpack4中使用splitChunkPlugin时,根据需要将公共代码拆分为多个依赖后,需要在创建htmlWebpackPlugin时候按需引入对应入口文件依赖的chunk。但是html-webpack-plugin的chunk配置项只能手动添加,在没有得知拆分后的chunk情况下,无法得知对应html的依赖chunk,也就无法按需做引入。

因此鄙人自己写了个配合html-webpack-plugin的插件,使用方便,效果还行,如果有帮到你,希望能在github上赐我一颗小星星。

github地址:https://github.com/pomelott/html-inline-entry-chunk-plugin

html-inline-entry-chunk-plugin使用教程如下:

单页应用:

// webpack plugin config
module.exports = {
entry: {
index: './src/js/index.js'
},
plugin: [
new inlineHtmlEntryChunkPlugin(),
// when useing inlineHtmlEntryChunkPlugin, the chunk param in htmlWebpackPlugin is invalid
new htmlWebpackPlugin({
entry: 'index',
chunk: ['runtime'] //chunk is invalid
})
]
}

多页应用:

// webpack plugin config
module.exports = {
entry: {
index: './src/js/index.js',
list: './src/js/list.js'
},
plugin: [
new inlineHtmlEntryChunkPlugin(),
new htmlWebpackPlugin({
entry: 'index'
}),
new inlineHtmlEntryChunkPlugin(),
new htmlWebpackPlugin({
entry: 'list'
})
]
}

配置项:

Name Type Default Description
inject {Object} {css: 'head', js: 'body'} control the assets of position in HTML
tag {Object} {} Add additional resource tags
tagPriority {Number} 0 Control the insertion order of entry chunk and other tags

示例:

module.exports = {
plugin: [
new htmlInlineEntryChunkPlugin({
inject: {
js: 'body',
css: 'head'
},
tagPriority: 1,
tag: {
head: [
'https://cdn.bootcdn.net/ajax/libs/basscss/8.1.0/css/basscss-cp.css',
'https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'
],
body: [
'https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.0/animate.compat.css',
'https://cdn.bootcdn.net/ajax/libs/Chart.js/3.0.0-alpha/Chart.esm.js'
]
}
}),
new htmlWebpackPlugin({
entry: 'index'
})
]
}

webpack4多页应用HTML按需添加入口依赖chunk【html-webpack-plugin & html-inline-entry-chunk-plugin】的更多相关文章

  1. Word2010中的页眉怎样删除和添加横线

    http://jingyan.baidu.com/article/f79b7cb3bb3c629144023e05.html 我们在使用Word2010编辑文档中时,有时需要在页眉下方删除或添加一条横 ...

  2. 解决:在pom.xml处理添加testng依赖之外,需对testng进行关联

    问题描述:当maven项目中下载了testng包,在调用后,执行maven test,未执行testng.xml中指定的测试类. 解决:在pom.xml处理添加testng依赖之外,需对testng进 ...

  3. 添加Pods依赖

    1. 添加所需文件 1.1. 添加 .podspec 文件 1.1.1.  创建 必须文件 使用命令 pod spec create name.podspec 或者直接拷贝一份 1.1.2.  添加内 ...

  4. 解决“添加远程依赖方式没有效果”的bug

    1.添加远程依赖dependencies的compile方式

  5. 添加 Gradle 依赖与 build.gradle 配置初识

    添加 Gradle 我们可以到我们添加 Maven 依赖的网站 Maven Repository: Search/Browse/Explore http://mvnrepository.com/ 上查 ...

  6. IDEA中添加各种依赖pom.xml文件内容

    刚实习的小白,今天准备进入项目,纳尼,前辈把框架什么的都搭建好了,默默的抹了一把辛酸泪,刚刚接触自学框架的时候,添加依赖的时候总是各种问题,让前辈发给我之后,才发现人家写的代码相当优美了.下面就是前辈 ...

  7. IDEA中Maven管理下添加mysql依赖

    在做Java Web项目的时候,不可避免的就要使用到数据库,下面就是在IDEA中添加mysql依赖的方法. 如果你看到这里,就表示你弄懂了IDEA,maven和Tomcat等,所以... 只需要在po ...

  8. maven添加本地依赖包方法

    1.某些情况下不方便上传本地依赖包到Maven repository,可以通过下面方法添加本地依赖包. 2.方法 1).pom.xml中添加以下代码块 <dependency> <g ...

  9. Maven 手动添加第三方依赖包及编译打包和java命令行编译JAVA文件并使用jar命令打包

    一,实例:新建了一个Maven项目,在eclipse中通过 build path –> configure path-.将依赖包添加到工程中后,eclipse不报错了.但是用Maven命令 mv ...

随机推荐

  1. gojs去水印

    重点在go.js文件中将这个方法中的代码注释掉即可 搜索关键字 7ca11abfd022028846 然后注释下列代码,注释前先整理JS格式 function ni() { if(th) { var ...

  2. 用scanf、printf输入输出string型字符串

    c语言里是没有string型的,string在c++里面.有的时候在c++里要用scanf.printf输入输出string型字符串,这是可以实现的,不过要做一点处理. 具体操作看代码: #inclu ...

  3. sqlilab11-14

    less11 抓包 ' " 实验发现'构成闭合,存在注入点 less-12 a,b都有注入点,b比较好判断闭合 less13 less14

  4. [Inno Setup] 退出安装程序的两种方式

    1. 完全静默的退出 procedure ExitProcess(exitCode:integer); external 'ExitProcess@kernel32.dll stdcall'; ... ...

  5. 日志分析工具ELK(二)

    五.Logstash日志收集实践 在学习Logstash之前,我们需要先了解以下几个基本概念: logstash收集日志基本流程: input-->codec-->filter--> ...

  6. 4.pickling 和unpickling是什么?

    pickling 和unpickling是什么? Pickle module accepts any Python object and converts it into a string repre ...

  7. Flutter仿网易云音乐:播放界面

    写在前头 本来是要做一个仿网易云音乐的flutter项目,但是因为最近事情比较多,项目周期跨度会比较长,因此分几个步骤来完成.这是仿网易云音乐项目系列文章的第一篇.没有完全照搬网易云音乐的UI,借鉴了 ...

  8. Linux运维面试题:请简要说明Linux系统在目标板上的启动过程?

    Linux运维面试题:请简要说明Linux系统在目标板上的启动过程? 该问题是Linux运维面试最常见的问题之一,问题答案如下: 1.用户打开PC的电源,BIOS开机自检,按BIOS中设置的启动设备( ...

  9. ACM-ICPC 2019 山东省省赛 M Sekiro

    Sekiro: Shadows Die Twice is an action-adventure video game developed by FromSoftware and published ...

  10. P2024 食物链(种类并查集)

    P2024 [NOI2001]食物链 题目描述 动物王国中有三类动物 A,B,C,这三类动物的食物链构成了有趣的环形.A 吃 B,B吃 C,C 吃 A. 现有 N 个动物,以 1 - N 编号.每个动 ...