开发过程中可能还会处理什么字体、图标、音频等资源，这里我们记录一下。
1. 处理HTML资源
这里的HTML其实只要处理一个index.html就行了，需要使用插件功能来自动引入打包后的资源到index.html中，如：在 body 中使用 script 标签引入你所有 webpack 生成的 bundle。
- 安装所需插件
npm i html-webpack-plugin -D- 在webpack配置中启用插件
文件名：webpack.config.js
const path = require("path");
const ESLintWebpackPlugin = require("eslint-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
//...
plugins: [
new ESLintWebpackPlugin({
// 指定检查文件的根目录
context: path.resolve(__dirname, "src"),
}),
new HtmlWebpackPlugin({
// 以 public/index.html 为模板创建文件
// 新的html文件有两个特点：1. 内容和源文件一致 2. 自动引入打包生成的js等资源
template: path.resolve(__dirname, "public/index.html"),
}),
],
};这个index.html的文件路径可以自定义，不过作为公共模板文件，我们一般放在public目录下面。
- 运行webpack
npx webpack此时 dist 目录就会输出一个 index.html 文件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>webpack App</title>
</head>
<body>
<script src="index_bundle.js"></script>
</body>
</html>可以看见该文件自动引入了webpack打包后的js文件。
如果在 webpack 的输出中有任何 CSS 资源（例如，使用 MiniCssExtractPlugin 提取的 CSS），那么这些资源也会在 HTML 文件 <head> 元素中的 <link> 标签内引入。
2.处理字体图标资源
- 下载字体图标文件
- 打开阿里巴巴矢量图标库
- 选择想要的图标添加到购物车，统一下载到本地解压。
- 将文件引入项目中
src/fonts/iconfont.ttf
src/fonts/iconfont.woff
src/fonts/iconfont.woff2
src/css/iconfont.css // (注意字体文件路径需要修改)以上是文件存放在项目的目录路径。
- 引入样式在入口文件
文件名：main.js
// 引入资源，Webpack才会对其打包
import "./css/iconfont.css";
// ...- 在HTML文件中测试图标
文件名：public/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>webpack5</title>
</head>
<body>
<h1>Hello Webpack5</h1>
<!-- 使用字体图标 -->
<i class="iconfont icon-arrow-down"></i>
<i class="iconfont icon-ashbin"></i>
<i class="iconfont icon-browse"></i>
<script src="../dist/static/js/main.js"></script>
</body>
</html>- 在webpack配置中处理字体图标文件
文件名：webpack.config.js
module.exports = {
// ...
module: {
rules: [
// ...
{
test: /\.(ttf|woff2?)$/,
type: "asset/resource",
generator: {
filename: "static/media/[hash:8][ext][query]",
},
},
],
},
plugins: [],
mode: "development",
};资源模块类型(asset module type)，通过添加 4 种新的模块类型，来替换所有这些 loader：
asset/resource发送一个单独的文件并导出 URL。之前通过使用file-loader实现。asset/inline导出一个资源的 data URI。之前通过使用url-loader实现。asset/source导出资源的源代码。之前通过使用raw-loader实现。asset在导出一个 data URI 和发送一个单独的文件之间自动选择。之前通过使用url-loader，并且配置资源体积限制实现。
type: "asset/resource"和type: "asset"的区别：
type: "asset/resource"相当于file-loader, 将文件转化成 Webpack 能识别的资源，其他不做处理type: "asset"相当于url-loader, 将文件转化成 Webpack 能识别的资源，同时小于某个大小的资源会处理成 data URI 形式
- 运行webpack
npx webpack打开 index.html 页面查看效果
3. 如果需要处理音频或其他文件类型
就是在处理字体图标资源基础上增加其他文件类型，统一处理即可
文件名：webpack.config.js
{
test: /\.(ttf|woff2?|map4|map3|avi)$/,
type: "asset/resource",
generator: {
filename: "static/media/[hash:8][ext][query]",
},
},可以添加一些测试文件进行测试。
