web-dev-qa-db-fra.com

Webpack 2+: Comment appliquer différents chargeurs pour des fichiers ayant la même extension?

Voici mon cas d'utilisation: la plupart des svgs devraient être en ligne. J'ai donc installé une règle comme celle-ci:

{test: /\.svg$/, use: "svg-inline-loader"},

Dans certains cas, je veux juste l’url d’un svg plutôt que l’aligner. Dans webpack 1.x, je les demandais comme ceci: require('path/to/file.svg?external').

Voici la règle correspondante:

{test: /\.svg\?external$/, use: "file-loader!image-webpack-loader"},

Il semble que Webpack 2 n'inclue plus la partie ? lorsque testing pour une règle puisque seule la première règle est appliquée à all my svgs après la migration.

Y a-t-il un moyen de contourner ceci? Existe-t-il une stratégie différente pour appliquer différents ensembles de chargeurs aux fichiers de la même extension lorsque requireing les?

PS: Je sais que je pourrais avoir besoin du fichier comme ceci: require('!file-loader!image-webpack-loader!path/to/file.svg') mais mes chargeurs sont un peu plus complexes que cela et je ne veux pas répéter leur configuration tout le temps.

PSS: Cela ne semble pas fonctionner non plus (il n'applique toujours que la première règle)

{test: /\.svg$/, use: "svg-inline-loader", exclude: /\?external/},
{test: /\.svg$/, use: "file-loader?!image-webpack-loader", include: /\?external/}
webpackwebpack-2
9
Daniel

J'ai donc récemment assisté à une présentation de Juho Vepsäläinen de Webpack et trouvé la réponse dans cette diapositive :

{
  test: /.css$/,

  oneOf: [
    {
      resourceQuery: /inline/, // foo.css?inline
      use: 'url-loader',
    },
    {
      resourceQuery: /external/, // foo.css?external
      use: 'file-loader',
    },
  ],
}

resourceQuery à la rescousse!

14
Daniel

resolveLoader.alias sera une solution pour vous.

Votre configuration ressemblera à ceci:

resolveLoader: {
  alias: {
    myLoader1: "svg-inline-loader", // and much more
    myLoader2: "file-loader!image-webpack-loader" // and much more
  }
}

et utilisation:

require('myLoader1!path/to/file1.svg');
require('myLoader2!path/to/file2.svg');

Ou si vous voulez par exemple que myLoader1 config soit la configuration par défaut et que vous utilisiez de temps en temps les chargeurs myLoader2, utilisez ce type de configuration:

{
  test: /\.svg$/,
  use: "svg-inline-loader" // and much more
}

// ...

resolveLoader: {
  alias: {
    myLoader: "file-loader!image-webpack-loader" // and much more
  }
}

et utiliser comme ceci:

require('path/to/file1.svg'); // default svg-inline-loader
require('!myLoader!path/to/file2.svg'); // specific file-loader!image-webpack-loader
// ! at the beginning - disables loaders from default
// and myLoader enables file-loader and image-webpack-loader

PS J'avais une question similaire ici c'est pour le WebPack 1 mais la documentation indique que resolveLoader.alias fonctionne de la même manière.

6
Everettss

En plus de test, vous pouvez spécifier les conditions include/exclude. À partir de docs sur les options de configuration :

{
    test: /\.jsx?$/,
    include: [
      path.resolve(__dirname, "app")
    ],
    exclude: [
      path.resolve(__dirname, "app/demo-files")
    ]
    // these are matching conditions, each accepting a regular expression or string
    // test and include have the same behavior, both must be matched
    // exclude must not be matched (takes preferrence over test and include)
    // Best practices:
    // - Use RegExp only in test and for filename matching
    // - Use arrays of absolute paths in include and exclude
    // - Try to avoid exclude and prefer include
}
1
simon04