webpack5.9.0自定义图片名称并打包到指定文件路径下

我们知道，webpack5打包图片时会自动帮我们生成很长的名字，并且会默认打包到某路径，当我们想自定义图片名称，并且打包到指定文件路径下时该怎么做呢？

【例如：我们要将图片bg.jpeg以格式bg.【8位数的hash，以免图片名称冲突】.jpeg，打包到dist目录下的img文件夹时，该怎么做呢？】

我们可以在webpack.config.js文件中添加如下代码：

module: {
    rules: [
      {
        test: /\.(jpg|png|gif|jpeg)$/i,
        type: 'asset/resource',
        generator: {
          filename: 'img/[name].[hash:8].[ext]'
        }
      }
    ],
  }

其中 ‘img/[name].[hash:8].[ext]’ 的具体含义为：将图片打包在img目录下，并且图片的格式为【原来图片名称】.【为了防止图片冲突，依然使用hash，但是我们只保留8位数】.【图片原来的拓展名】，这样就可以自定义打包图片啦~

到此就结束啦，感谢您的支持/玫瑰~