Gathering detailed insights and metrics for inline-chunk-html-webpack-plugin
Gathering detailed insights and metrics for inline-chunk-html-webpack-plugin
Installations
npm install inline-chunk-html-webpack-pluginDeveloper Guide
BETA
Typescript
No
Module System
N/A
Node Version
14.17.3
NPM Version
6.14.13
Releases
Unable to fetch releases
Download Statistics
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
Maintainers
1
Package Meta Information
Latest Version
1.0.7
Package Id
inline-chunk-html-webpack-plugin@1.0.7
Unpacked Size
8.66 kB
Size
4.05 kB
File Count
4
NPM Version
6.14.13
Node Version
14.17.3
Total Downloads
Cumulative downloads
Total Downloads
NaN
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
Weekly Downloads
Monthly Downloads
Yearly Downloads
Peer Dependencies
2
InlineChunkHtmlWebpackPlugin
介绍
把外联资源转成页内形式。使用场景：对于单页html的，开发时为了开发体验好，把css,js分离到独立文件中，等上线时候，考虑减少网络请求，会把外联资源，移动到页内，并可能还会做压缩混淆。这个webpack 插件就解决这个问题。
软件架构
- 层次上： InlineChunkHtmlWebpackPlugin > html-webpack-plugin的hooks > webpack 的钩子
- webpack 插件机制： webpack 打包的过程，可以想象成是一条生产作业的流水线，原材料经过流水线上的每个环节，最后输出成品，这个成品就是浏览器可以直接认识的东西了。
- webpack 的 hooks: webpack 把流水线上各个环节之间预留了很多坑位，这些个坑位(钩子)里，你可以插入自己的执行逻辑，对中间形态的半成品做定制化的加工处理！用到的机制跟浏览器的事件模型是一样的，也是发布订阅模式。 js里我们注册一个事件是 'on' 什么事件，这里是'tap' 什么自定义插件。
- html-webpack-plugin 基于一个模板文件作为输入源头，经过html-webpack-plugin处理后输出到指定目录。
安装教程
npm i inline-chunk-html-webpack-plugin -D
使用说明
- 你的项目结构应该是这样的：
1|--demo 2 |--src 3 |--index.html 4 |--js/index.js 5 |--style/index.css 6 |--webpack.config.js 7 |--package.json
- src/index.html 是固定的。暂时不支持配置。你只能这样写。
- webpack.config.js 里插件配置字段：
1 plugins:[ 2 new InlineChunkHtmlWebpackPlugin(), 3 ]
注意： 我们插件是基于HtmlWebpackPlugin,不要忘记对他的配置。所以完整的配置：
1plugins:[ 2 new HtmlWebpackPlugin({ 3 template:'./src/index.html' 4 }), 5 new InlineChunkHtmlWebpackPlugin(), 6]
- package.json里配置好脚本
1"scripts": { 2 "dev": "webpack" 3},
- cmd里执行：
npm run dev
之后会在当前项目目录下生成一个 webpack_dist文件夹，包含加工过的目标文件index.html
案例
index.html 源文件
1<!DOCTYPE html> 2<html lang="en"> 3 <head> 4 <link rel="stylesheet" href="./style/index.css"/> 5 <script src="./js/index.js"></script> 6 <script src="./js/page.js"></script> 7 </head> 8 <body> 9 10 <div class="wrapper"> 11 <div class="bg"> 12 <h1>hell I am Macrolam</h1> 13 </div> 14 15 </div> 16 17 </body> 18</html> 19
输出后：
1<!DOCTYPE html> 2<html lang="en"> 3 <head> 4 <style type="text/css"> 5 h1 { 6 color: red; 7 font-size: 18px; 8 } 9 </style> 10 <script type="text/javascript" defer="defer"> 11 /* 使用uglify压缩 */ 12 console.log("我是indexJS"); 13 </script> 14 <script type="text/javascript" defer="defer"> 15 /* 使用uglify压缩 */ 16 console.log("我是pagejs1"); 17 </script> 18 </head> 19 <body> 20 <div class="wrapper"> 21 <div class="bg"> 22 <h1>hell I am Macrolam</h1> 23 </div> 24 </div> 25 </body> 26</html> 27 28
资源地址
参与贡献
- Fork 本仓库
- 新建 Feat_xxx 分支
- 提交代码
- 新建 Pull Request
No vulnerabilities found.
No security vulnerabilities found.