問題

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]",
        },
      },
    ],
  },

參考：官方文檔