webpack4多页应用HTML按需添加入口依赖chunk【html-webpack-plugin & html-inline-entry-chunk-plugin】
在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】的更多相关文章
- Word2010中的页眉怎样删除和添加横线
http://jingyan.baidu.com/article/f79b7cb3bb3c629144023e05.html 我们在使用Word2010编辑文档中时,有时需要在页眉下方删除或添加一条横 ...
- 解决:在pom.xml处理添加testng依赖之外,需对testng进行关联
问题描述:当maven项目中下载了testng包,在调用后,执行maven test,未执行testng.xml中指定的测试类. 解决:在pom.xml处理添加testng依赖之外,需对testng进 ...
- 添加Pods依赖
1. 添加所需文件 1.1. 添加 .podspec 文件 1.1.1. 创建 必须文件 使用命令 pod spec create name.podspec 或者直接拷贝一份 1.1.2. 添加内 ...
- 解决“添加远程依赖方式没有效果”的bug
1.添加远程依赖dependencies的compile方式
- 添加 Gradle 依赖与 build.gradle 配置初识
添加 Gradle 我们可以到我们添加 Maven 依赖的网站 Maven Repository: Search/Browse/Explore http://mvnrepository.com/ 上查 ...
- IDEA中添加各种依赖pom.xml文件内容
刚实习的小白,今天准备进入项目,纳尼,前辈把框架什么的都搭建好了,默默的抹了一把辛酸泪,刚刚接触自学框架的时候,添加依赖的时候总是各种问题,让前辈发给我之后,才发现人家写的代码相当优美了.下面就是前辈 ...
- IDEA中Maven管理下添加mysql依赖
在做Java Web项目的时候,不可避免的就要使用到数据库,下面就是在IDEA中添加mysql依赖的方法. 如果你看到这里,就表示你弄懂了IDEA,maven和Tomcat等,所以... 只需要在po ...
- maven添加本地依赖包方法
1.某些情况下不方便上传本地依赖包到Maven repository,可以通过下面方法添加本地依赖包. 2.方法 1).pom.xml中添加以下代码块 <dependency> <g ...
- Maven 手动添加第三方依赖包及编译打包和java命令行编译JAVA文件并使用jar命令打包
一,实例:新建了一个Maven项目,在eclipse中通过 build path –> configure path-.将依赖包添加到工程中后,eclipse不报错了.但是用Maven命令 mv ...
随机推荐
- gojs去水印
重点在go.js文件中将这个方法中的代码注释掉即可 搜索关键字 7ca11abfd022028846 然后注释下列代码,注释前先整理JS格式 function ni() { if(th) { var ...
- 用scanf、printf输入输出string型字符串
c语言里是没有string型的,string在c++里面.有的时候在c++里要用scanf.printf输入输出string型字符串,这是可以实现的,不过要做一点处理. 具体操作看代码: #inclu ...
- sqlilab11-14
less11 抓包 ' " 实验发现'构成闭合,存在注入点 less-12 a,b都有注入点,b比较好判断闭合 less13 less14
- [Inno Setup] 退出安装程序的两种方式
1. 完全静默的退出 procedure ExitProcess(exitCode:integer); external 'ExitProcess@kernel32.dll stdcall'; ... ...
- 日志分析工具ELK(二)
五.Logstash日志收集实践 在学习Logstash之前,我们需要先了解以下几个基本概念: logstash收集日志基本流程: input-->codec-->filter--> ...
- 4.pickling 和unpickling是什么?
pickling 和unpickling是什么? Pickle module accepts any Python object and converts it into a string repre ...
- Flutter仿网易云音乐:播放界面
写在前头 本来是要做一个仿网易云音乐的flutter项目,但是因为最近事情比较多,项目周期跨度会比较长,因此分几个步骤来完成.这是仿网易云音乐项目系列文章的第一篇.没有完全照搬网易云音乐的UI,借鉴了 ...
- Linux运维面试题:请简要说明Linux系统在目标板上的启动过程?
Linux运维面试题:请简要说明Linux系统在目标板上的启动过程? 该问题是Linux运维面试最常见的问题之一,问题答案如下: 1.用户打开PC的电源,BIOS开机自检,按BIOS中设置的启动设备( ...
- ACM-ICPC 2019 山东省省赛 M Sekiro
Sekiro: Shadows Die Twice is an action-adventure video game developed by FromSoftware and published ...
- P2024 食物链(种类并查集)
P2024 [NOI2001]食物链 题目描述 动物王国中有三类动物 A,B,C,这三类动物的食物链构成了有趣的环形.A 吃 B,B吃 C,C 吃 A. 现有 N 个动物,以 1 - N 编号.每个动 ...