webpack4多页应用HTML按需添加入口依赖chunk【html-webpack-plugin & html-inline-entry-chunk-plugin】
2024-08-26 20:46:00
在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'
})
]
}
最新文章
- 网页或微信小程序中使元素占满整个屏幕高度
- MapReduce Shuffle过程
- Python之路，day12-Python基础
- jquery操作dom
- ABP的工作单元
- Head First Design Patterns
- UIWebView1－b
- Contest 20140914 Mushroom写情书 字符串雙hash 後綴數組
- 【Android】Activity的菜单机制和方法解析
- ubuntu 16.04 国内仓库地址
- 自定义实现moveable button
- python之旅第八篇--异常
- jquery validate强大的jquery表单验证插件
- 2017-2018-2 20165327 实验四《Android程序设计》实验报告
- 7.C#知识点:抽象类和接口浅谈
- CodeFirst时使用T4模板
- 理解HashMap的原理
- .net下log4net的使用
- Linux学习笔记-Linux系统简介
- PS_Form个性化标准LOV的替换和数据源追溯分析（案例）