web-dev-qa-db-fra.com

Chemin de destination défini par le chargeur d'URL Webpack

J'utilise le plugin url-loader de webpack et je le configure comme:

{
    test: /\.(ttf|eot|woff|woff2|svg)$/,
    loader: "url-loader?limit=50000"
}

Il envoie des fichiers> 50k au système de fichiers, mais je ne trouve pas comment définir un chemin de destination.

Dans ce cas, je veux que les fichiers soient stockés dans ./fonts et non à la racine.

webpackurlloader
16
user3900456

url-loader est construit sur le chargeur de fichiers, vous pouvez donc l'utiliser comme un chargeur de fichiers, comme indiqué ci-dessous:

{
    test: /\.(ttf|eot|woff|woff2|svg)$/,
    loader: "url-loader?limit=50000&name=fonts/[name].[ext]"
}
24
wandergis

tu peux l'écrire comme ça

{
        test: /\.(png|woff|eot|ttf|svg|gif)$/,
        use: [
          {
          loader: 'url-loader',
          options: {
            limit: 1000, // if less than 10 kb, add base64 encoded image to css
            name: "assets/[hash].[ext]" // if more than 10 kb move to this folder in build using file-loader
          }
        }]
      }
8
Johansrk

Pour ajouter à la réponse par @wandergis url-loader renommera l’image si la taille limite est dépassée et utilisera un hachage pour le nom. Lorsque vous utilisez [name].[ext] comme suggéré, utilise le nom d'origine du fichier, ce qui n'est pas ce dont j'avais besoin. J'avais besoin du nom du hash que url-loader va créer. Donc, vous pouvez ajouter [hash].[ext] pour obtenir le fichier renommé.

{
    test: /\.(ttf|eot|woff|woff2|svg)$/,
    loader: "url-loader?limit=50000&name=fonts/[hash].[ext]"
}
6
David Glass

Vous pouvez également le faire, ce qui peut être plus propre

   {
     test: /\.(ttf|eot|woff|woff2|svg)$/,
     use: [
        {
          loader: 'url-loader',
          options: {
            name:'[hash].[ext]' 
            outputPath: 'fonts',
          },
        },
       ],
    }
0
Petros Kyriakou