webpack从入门到原理(基础三)——资源处理

·  阅读 942
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 image.png 下载完成之后将iconfont.css文件复制到src/css

image.png 并将下面三个文件复制到src/font目录下

image.png 然后修改iconfont.css中的引入路径

image.png 修改完成之后在main.js中引入css样式,此时不需要其他配置,就可以npx webpack进行打包,出现icon图标就是成功了。

image.png 但是看到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",
复制代码

小结

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

收藏成功!
已添加到「」, 点击更改