# inline-chunk-webpack-plugin

**Repository Path**: d7c/inline-chunk-webpack-plugin

## Basic Information

- **Project Name**: inline-chunk-webpack-plugin
- **Description**: 将指定名称、大小规则的 JS、CSS （小）文件内联到 html 文件中，减少请求次数，提高性能。
- **Primary Language**: NodeJS
- **License**: AGPL-3.0
- **Default Branch**: master
- **Homepage**: http://www.d7c.top/
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-08-09
- **Last Updated**: 2022-08-11

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# inline-chunk-webpack-plugin

## 介绍

将指定名称、大小规则的 JS、CSS （小）文件内联到 html 文件中，减少请求次数，提高性能。

## 软件架构

借助 [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin) 实现将指定名称、大小规则的 JS、CSS （小）文件内联到 html 文件中，减少请求次数，提高性能。同时删除这些小文件。

## Plugin 工作原理

webpack 就像是一条生产线，将源文件经过一系列处理流程后输出结果。这条生产线上的每个处理流程的职责都是单一的，多个流程之间存在依赖关系，只有完成当前处理流程后才能交给下一个流程去处理。[插件](https://webpack.docschina.org/api/compiler-hooks/)就像是插入到生产线中的一个功能，在特定的时机对生产线上的资源进行处理。webpack 通过 Tapable 来组织这条复杂的生产线。webpack 在运行过程中会广播事件，插件只需要监听它所绑定的事件，就能加入到这条生产线中改变生产线的运作。webpack 的事件流机制保证了插件的有序性，使得整个系统拥有很好的扩展性。

webpack 在编译代码过程中会触发一系列的 Tapable 钩子事件，插件所做的就是找到相应的钩子，往上面挂上自己的任务，也就是注册事件，这样当 webpack 构建的时候，插件注册的事件就会随着钩子的触发而执行了。

## 安装教程

### 1. 下载依赖

```
npm install
```

### 2. 编译代码

```
npm run build
```

## 使用说明

### 1. 克隆并安装项目，在项目根目录下执行

```
npm install
```

### 2. 其他命令

```
npm run debug
npm run lint
```

### 3. 使用

```
// webpack.config.js
// 将指定名称、大小规则的 JS、CSS （小）文件内联到 html 文件中，减少请求次数，提高性能。
const InlineChunkWebpackPlugin = require("./plugins/inline-chunk-webpack-plugin");

// webpack.config.js -> plugins
// 注意：由于使用 fullhash、chunkhash 或 contenthash 时不修改源码文件，打包时不会输出，即时设置了 output.clean=true，要使每次打包重新生成就不要设置。
new InlineChunkWebpackPlugin({
    test: /\.(css|js)$/,
    minBytes: 1024
})
```

## 运行效果

<img src="./docs/效果.png">

## 捐助打赏

如果您觉得我们的开源软件对你有所帮助，请扫下方二维码打赏我们一杯咖啡。
![微信收款码](https://images.gitee.com/uploads/images/2021/0222/174352_b22739f5_1070311.jpeg "微信收款码.jpg")
![微信赞赏码](https://images.gitee.com/uploads/images/2021/0222/174521_67e18b39_1070311.jpeg "微信赞赏码.jpg")
![支付宝收款码](https://images.gitee.com/uploads/images/2021/0222/174540_94a9ac41_1070311.jpeg "支付宝收款码.jpg")

## 参与贡献

1.  Fork 本仓库
2.  新建 inline-chunk-webpack-plugin_xxx 分支
3.  提交代码
4.  新建 Pull Request

## 特技

1.  使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md
2.  Gitee 官方博客 [blog.gitee.com](https://blog.gitee.com)
3.  你可以 [https://gitee.com/explore](https://gitee.com/explore) 这个地址来了解 Gitee 上的优秀开源项目
4.  [GVP](https://gitee.com/gvp) 全称是 Gitee 最有价值开源项目，是综合评定出的优秀开源项目
5.  Gitee 官方提供的使用手册 [https://gitee.com/help](https://gitee.com/help)
6.  Gitee 封面人物是一档用来展示 Gitee 会员风采的栏目 [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)

<style>p{text-indent:2em}</style>