webpack5处理其他资源
Posted 天界程序员
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了webpack5处理其他资源相关的知识，希望对你有一定的参考价值。
开发过程中可能还会处理什么字体、图标、音频等资源，这里我们记录一下。
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]",
,
,
可以添加一些测试文件进行测试。
以上是关于webpack5处理其他资源的主要内容，如果未能解决你的问题，请参考以下文章