有些场景下，希望能将引用的CSS文件内联至style标签中，将JS文件内联至script标签中，这样就可以减少网络请求数量，提升页面加载速度。尤其是在页面引用到了众多小型的资源文件时，嵌入到一个html文件中，页面首次加载速度会有明显提高。
我们可以配置Webpack，借助插件：html-bundler-webpack-plugin，将这些小型文件都内联化，配置打包到一个html文件中就可以了。下面是一个简单用例：
假如项目目录如下：
1
2
3
4
5
6
7
8
9
10
11
.
├── package.json
└── src
├── a.html
├── b.html
├── scripts
│ ├── a1.js
│ └── a2.js
└── styles
├── a1.css
└── a2.css
其中，a.html引用了a1.js和a1.css：
1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Page a</title>
<link rel="stylesheet" href="styles/a1.css">
</head>
<body>
<script src="scripts/a1.js"></script>
</body>
</html>HTML
b.html引用了a2.js和a2.css：
1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Page a</title>
<link rel="stylesheet" href="styles/a2.css">
</head>
<body>
<script src="scripts/a2.js"></script>
</body>
</html>HTML
我们希望将两个html文件各自所引用到的文件，分别打包到各自所在的html文件中，最终得到dist/a.html和dist/b.html两个文件，那么，可以按如下步骤来进行配置操作：
首先安装Webpack、html-bundler-webpack-plugin以及css-loader等依赖：
1
npm install html-bundler-webpack-plugin css-minimizer-webpack-plugin css-loader webpack webpack-cli -DSH
然后创建webpack.config.js配置文件：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
// webpack.config.js
import path from 'path';
import HtmlBundlerPlugin from 'html-bundler-webpack-plugin';
import CssMinimizerPlugin from 'css-minimizer-webpack-plugin';
import { fileURLToPath } from 'url';
const __filename = fileURLToPath(import.meta.url); // 获取当前文件路径
const __dirname = path.dirname(__filename);
export default {
mode: 'production',
output: {
path: path.join(__dirname, 'dist/'),
},
plugins: [
new HtmlBundlerPlugin({
entry: {
'a': './src/a.html',
'b': './src/b.html',
},
css: {
inline: true,
},
js: {
inline: true,
},
minify: true,
}),
new CssMinimizerPlugin(), // 压缩CSS
],
module: {
rules: [
{
test: /\.css$/,
use: ['css-loader'],
},
],
},
performance: false,
};JS
然后编辑package.json，加入一个打包指令：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
{
"name": "_proj",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"build": "webpack build --mode=production"
},
"keywords": [],
"author": "",
"license": "ISC",
"description": "",
"devDependencies": {
"css-loader": "^7.1.2",
"css-minimizer-webpack-plugin": "^7.0.0",
"html-bundler-webpack-plugin": "^4.4.1",
"webpack": "^5.96.1",
"webpack-cli": "^5.1.4"
},
"type": "module"
}JSON
终端运行：
1
npm run buildSH
会在dist目录下生成两个内嵌了所引用的CSS/JS文件内容的HTML文件。
_coverart.jpg?__frsh_c=2e81f84c04d5fa3242156ba4f2ac9e6200216413)
