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 ...
随机推荐
- 苹果登录服务端JWT算法验证-PHP
验证参数 可用的验证参数有 userID.authorizationCode.identityToken,需要iOS客户端传过来 验证方式 苹果登录验证可以选择两种验证方式 具体可参考这篇文章 htt ...
- System.Timers.Timer
前言 System.Timers.Timer组件是基于服务器的计时器,它能够指定在应用程序中引发Elapsed事件周期性间隔,以处理相应事件. 使用示例: 运行结果展示: System.Timers. ...
- Git基本操作和使用
基本命令: git config git init git clone git remote git fetch git commit git rebase git push 本地基本操作: git ...
- PSD转HTML
随着时间的推移,技术的进步,越来越多的人也越来越熟悉HTML和CSS以及不同的技术来将 Photoshop 设计转换成 HTML 或 CSS 格式.对于一个设计师或网页开发人员,知道如何将PSD文件转 ...
- 点击 QTableView,触发事件
Here is an example of how you can get a table cell's text when clicking on it. Suppose a QTableView ...
- Linux硬盘分区知识
前言 硬盘使用前,一般要分区,格式化(创建文件系统)<== 存放数据 类比,房子使用前,一般要隔断,装修,买家具,再住人. 分区 一块硬盘: 主分区.扩展分区.逻辑分区 主分区+扩展分区的数量& ...
- Java网络编程从入门到精通(27):关闭服务端连接
在客户端和服务端的数据交互完成后,一般需要关闭网络连接.对于服务端来说,需要关闭Socket和ServerSocket. 在关闭Socket后,客户端并不会马上感知自已的Socket已经关闭,也就是说 ...
- 现代软件工程讲义 如何提出靠谱的项目建议 NABCD
互联网时代对于创新者来说, 既是一个伟大的时代, 又是一个糟糕的时代. 你有很多机会做出影响世界的产品, 但是, 似乎任何想法都被别人想到过了, 做出来了, 上市了, 移植到各种平台上去了- 那么 ...
- Binary Index Tree
0 引言 Leetcode307 这道题给一个可变数组,求从\(i\)到\(j\)的元素之和. 一个naive的做法是,每次查询都从\(i\)累加到\(j\): class NumArray { pu ...
- postman(环境设置)
1.点击小齿轮进入到环境变量添加页面,点击add添加环境变量 2.新增环境输入变量名称和变量值 3.添加成功 4.接口中设置变量,切换环境进行传参 5.调用环境变量断言 调用环境变量中的phone变量 ...