webpack从入门到原理（基础三）——资源处理

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第3天，点击查看活动详情

前言

这一篇主要写了，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",

小结

以更文促进学，持续不断进步,加油！