在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. 苹果登录服务端JWT算法验证-PHP

    验证参数 可用的验证参数有 userID.authorizationCode.identityToken,需要iOS客户端传过来 验证方式 苹果登录验证可以选择两种验证方式 具体可参考这篇文章 htt ...

  2. System.Timers.Timer

    前言 System.Timers.Timer组件是基于服务器的计时器,它能够指定在应用程序中引发Elapsed事件周期性间隔,以处理相应事件. 使用示例: 运行结果展示: System.Timers. ...

  3. Git基本操作和使用

    基本命令: git config git init git clone git remote git fetch git commit git rebase git push 本地基本操作: git ...

  4. PSD转HTML

    随着时间的推移,技术的进步,越来越多的人也越来越熟悉HTML和CSS以及不同的技术来将 Photoshop 设计转换成 HTML 或 CSS 格式.对于一个设计师或网页开发人员,知道如何将PSD文件转 ...

  5. 点击 QTableView,触发事件

    Here is an example of how you can get a table cell's text when clicking on it. Suppose a QTableView ...

  6. Linux硬盘分区知识

    前言 硬盘使用前,一般要分区,格式化(创建文件系统)<== 存放数据 类比,房子使用前,一般要隔断,装修,买家具,再住人. 分区 一块硬盘: 主分区.扩展分区.逻辑分区 主分区+扩展分区的数量& ...

  7. Java网络编程从入门到精通(27):关闭服务端连接

    在客户端和服务端的数据交互完成后,一般需要关闭网络连接.对于服务端来说,需要关闭Socket和ServerSocket. 在关闭Socket后,客户端并不会马上感知自已的Socket已经关闭,也就是说 ...

  8. 现代软件工程讲义 如何提出靠谱的项目建议 NABCD

    互联网时代对于创新者来说, 既是一个伟大的时代, 又是一个糟糕的时代. 你有很多机会做出影响世界的产品,  但是, 似乎任何想法都被别人想到过了, 做出来了, 上市了, 移植到各种平台上去了-  那么 ...

  9. Binary Index Tree

    0 引言 Leetcode307 这道题给一个可变数组,求从\(i\)到\(j\)的元素之和. 一个naive的做法是,每次查询都从\(i\)累加到\(j\): class NumArray { pu ...

  10. postman(环境设置)

    1.点击小齿轮进入到环境变量添加页面,点击add添加环境变量 2.新增环境输入变量名称和变量值 3.添加成功 4.接口中设置变量,切换环境进行传参 5.调用环境变量断言 调用环境变量中的phone变量 ...