webpack 配置file-loader统一字体打包文件输出目录后dist下仍然有字体打包文件

问题

webpack 配置file-loader统一字体打包文件输出目录后dist下仍然有字体打包文件

原因

查看webpack版本，如果是webpack5，则是因为webpack5内存在asse Modules。

资源模块(asset module)是一种模块类型，它允许使用资源文件（字体，图标等）而无需配置额外 loader。默认情况下，asset/resource 模块以 [hash][ext][query] 文件名发送到输出目录。

解决办法

删除配置文件中的file-loader/url-loader，使用asset module指定文件生成路径

指定路径方式一

output.assetModuleFilename

在output中统一Asset Module 输出路径

output: {
    
     
path : path.resolve(__dirname, './dist' ), 
filename : '[name].[contenthash:6].bundle.js' , 
assetModuleFilename : 'images/[hash][ext]' , 
},

Rule.generator.filename

将某些资源发送到指定目录，Rule.generator.filename 与 output.assetModuleFilename 相同，并且仅适用于 asset 和 asset/resource 模块类型。

 module: {
    
    
    rules: [
      {
    
    
        // 加载字体图标
        test: /\.(eot|ttf|svg|woff)$/,
        type: "asset/resource",
        generator: {
    
    
          // 输出到 font 目录中，占位符 [name] 保留原始文件名，
          // [hash] 防止出现相同文件名无法区分，[ext] 拿到后缀名
          filename: "font/[name].[hash:6][ext]",
        },
      },
    ],
  },

参考：官方文档