在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. Redis学习与应用-位图

    什么是位图 位图bitmap是通过一个bit来表示某个元素对应的值或者状态,是由一组bit位组成,每个bit位对应0和1两个状态,虽然内部还是采用string类型进行存储,但是redis提供了直接操作 ...

  2. 利用 tee 命令调试shell脚本中的管道

    在编写shell脚本时,调试是个比较麻烦的事,特别是涉及到多层管道命令的时候,会产生多个中间结果,tee命令的作用是从标准输入中读取数据写入标准输出或文件中,利用它可以从管道中读取中间结果并写入本地临 ...

  3. BUAA_OO 第二单元总结

    作业分析 第一次作业 本次作业是单次可捎带电梯的设计,主要是初步了解多线程的设计实现和测试,本身算法设计非常简单.这次作业整体来说不是很难,是多线程的入门,主要目的就是让我们认识,了解一下什么是多线程 ...

  4. 转:handler.post 为什么要将thread对象post到handler中执行呢?

    转载网址:http://blog.csdn.net/fei0724/article/details/8664462在Android中使用Handler和Thread线程执行后台操作 对于线程的控制,我 ...

  5. php最快捷的插入数据,3000万仅需5秒

    <?phpheader('content-type:text/html;charset=utf-8');//采集数据$url="http://www.keepclub.com/club ...

  6. Linux安全实验缓冲区溢出

    缓冲区溢出实验: 缓冲区溢出是指程序试图向缓冲区写入超出预分配固定长度数据的情况.这一漏洞可以被恶意用户利用来改变程序的流控制,甚至执行代码的任意片段.这一漏洞的出现是由于数据缓冲器和返回地址的暂时关 ...

  7. Web性能优化之-深入理解TCP Socket

    什么是Socket?    大家都用电脑上网,当我们访问运维社区https://www.unixhot.com的时候,我们的电脑和运维社区的服务器就会创建一条Socket,我们称之为网络套接字.那么既 ...

  8. SpringCloud入门(十一):Sleuth 与 Zipkin分布式链路跟踪

    现今业界分布式服务跟踪的理论基础主要来自于 Google 的一篇论文<Dapper, a Large-Scale Distributed Systems Tracing Infrastructu ...

  9. 【Linux常见命令】ip命令

    ip命令是用来配置网卡ip信息的命令,且是未来的趋势,重启网卡后IP失效. ip - show / manipulate routing, devices, policy routing and tu ...

  10. THU OS

    前言 最近在学清华的OS课程,实验课做的真厉害. 我们的操作系统课就是写一个系统调用,改下进程软中断通信的代码,代码量不足500...清华是借鉴MIT的课,实验课都是做一个完整的小型操作系统. 一共8 ...