Webpack url-chargeur de définir le chemin de destination

Je suis en utilisant webpack url-chargeur de plugin et l'ai configuré comme:

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

Il fichiers de sortie > 50k pour le système de fichiers, mais je ne trouve pas comment faire pour définir un chemin d'accès de destination.

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

InformationsquelleAutor user3900456 | 2015-12-05
  1. 25

    url-chargeur, c'est bâtir sur fichier-chargeur, de sorte que vous pouvez l'utiliser comme fichier-chargeur, comme illustré ci-dessous:

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

    vous pouvez l'écrire comme ceci

    {
        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
          }
        }]
      }
    InformationsquelleAutor Johansrk
  3. 7

    À ajouter à la réponse par @wandergis url-chargeur de renommer l'image si la taille limite est dépassée et l'utilisation d'un algorithme de hachage pour le nom. Lors de l'utilisation de [name].[ext] comme l'a suggéré, utilise le nom d'origine du fichier, ce qui n'est pas ce dont j'avais besoin. J'ai besoin du nom de la table de hachage que l'url-chargeur 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]"
}
    InformationsquelleAutor David Glass
  4. 0

    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',
          },
        },
       ],
    }
    InformationsquelleAutor Petros Kyriakou