Nachdem webpack den Dateilader konfiguriert hat, um das Ausgabeverzeichnis der Schriftartpaketdateien zu vereinheitlichen, befinden sich immer noch Schriftartpaketdateien unter dist

Frage

Nachdem webpack den Dateilader konfiguriert hat, um das Ausgabeverzeichnis der Schriftartpaketdateien zu vereinheitlichen, befinden sich immer noch Schriftartpaketdateien unter dist

Grund

Überprüfen Sie die Webpack-Version. Wenn es sich um webpack5 handelt, liegt dies daran, dass es in webpack5 Ass-Module gibt.

Ein Asset-Modul ist ein Modultyp, der die Verwendung von Ressourcendateien (Schriftarten, Symbole usw.) ohne die Konfiguration zusätzlicher Ladeprogramme ermöglicht. Standardmäßig werden Asset-/Ressourcenmodule mit [hash][ext][query]-Dateinamen an das Ausgabeverzeichnis gesendet.

Lösung

Löschen Sie den File-Loader/URL-Loader in der Konfigurationsdatei und verwenden Sie das Asset-Modul, um den Dateigenerierungspfad anzugeben

Geben Sie die Pfadmethode eins an

output.assetModuleFilename

Vereinheitlichen Sie den Ausgabepfad des Asset-Moduls in der Ausgabe

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

Regel.generator.Dateiname

Senden Sie einige Ressourcen an das angegebene Verzeichnis, Rule.generator.filename ist identisch mit output.assetModuleFilename und gilt nur für Asset- und Asset/Ressourcen-Modultypen.

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

Referenz: Offizielle Dokumentation