webpack从入门到原理（基础三）——资源处理
前言
这一篇主要写了，webpack中修改输出资源的名称和路径，自动清空上次打包资源，处理字体图标等资源。
修改输出资源的名称和路径
在上一篇，打包完图片之后发现main.js和图片都混在dist目录下很是杂乱，所以下面就处理一下它们存放的位置。参考官方文档,通过filename属性进行修改打包后文件的存放位置。
// webapck.config.js ...... output: { path: path.resolve(__dirname, "dist"), filename: "static/js/main.js", // 将 js 文件输出到 static/js 目录中 } ...... { test: /.(png|jpe?g|gif|webp)$/, type: "asset", parser: { dataUrlCondition: { maxSize: 10 * 1024, // 小于10kb的图片会被base64处理 }, }, generator: { // 将图片文件输出到 static/imgs 目录中 // 将图片文件命名 [hash:8][ext][query] // [hash:8]: hash值取8位 // [ext]: 使用之前的文件扩展名 // [query]: 添加之前的query参数 filename: "static/imgs/[hash:8][ext][query]", }, }, ...... 复制代码自动清空上次打包资源
自动清空上次打包资源只需要增加clean: true在下次运行npx webpack时就会先删除dist目录再次进行生成
// webpack.config.js ...... output: { ...... clean: true, // 自动将上次打包目录资源清空 }, ...... 复制代码处理字体图标资源
可以在阿里巴巴矢量图标库进行下载iconfont 下载完成之后将
iconfont.css文件复制到src/css下
并将下面三个文件复制到
src/font目录下
然后修改
iconfont.css中的引入路径
修改完成之后在
main.js中引入css样式，此时不需要其他配置，就可以npx webpack进行打包,出现icon图标就是成功了。
但是看到
dist目录会发现font目录下的文件打包后存放的位置直接和static平级，所以需要对它进行一下配置,再次打包即可生效。
{ test: /\.(ttf|woff2?)$/, type: "asset/resource", generator: { filename: "static/media/[hash:8][ext][query]", }, }, 复制代码type:"asset":小于某个大小的文件会转换成base64位type: "asset/resource":只会对文件原封不动的输出
处理其他资源
例如网站需要展示的介绍视频等资源,在进行打包的时候都只需要原封不动的输出时，我们就只需要在上面代码中不断地进行增加就好
// 可以无限增加++++ test: /.(ttf|woff2?|map4|map3|avi)$/, type: "asset/resource", 复制代码
小结
以更文促进学，持续不断进步,加油！
作者：i东东
链接：https://juejin.cn/post/7169020862975180831