Webpack 2: Jak zastosować różne programy ładujące do plików o tym samym rozszerzeniu?

Question

Oto mój przypadek użycia: większość svgów powinna być zaznaczona. Tak więc skonfigurowałem taką regułę:

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

W niektórych przypadkach potrzebuję tylko adresu URL svg, a nie jego wpisywania. W pakiecie internetowym 1.x wymagałem ich w następujący sposób: require('path/to/file.svg?external').

Oto odpowiednia zasada:

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

Wydaje się WebPacka 2 nie obejmuje ? udział już po test ing dla reguły, ponieważ tylko pierwsza zasada jest stosowana do wszystkie moi pomostów żylnych po migracji .

Czy istnieje sposób obejścia tego? Czy może być inna strategia stosowania różnych zestawów ładowań dla plików o tym samym rozszerzeniu, gdy są one używane?

PS: Jestem świadomy, że mogę wymagać tego pliku: require('!file-loader!image-webpack-loader!path/to/file.svg'), ale moje ładowarki są nieco bardziej skomplikowane i nie chcę powtarzać ich konfiguracji przez cały czas.

PSS: nie wydają się działać albo (to nadal stosuje się tylko pierwszą zasadę)

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

Answer 1

Więc Niedawno uczestniczyłem w wykładzie WebPACK Juho Vepsäläinen i znaleźć odpowiedź w this slide:

{ 
    test: /.css$/, 

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

resourceQuery na ratunek!

Answer 2

Oprócz test można określić include/exclude warunki. Od docs on configuration options:

{ 
    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 
} 

Answer 3

resolveLoader.alias będzie rozwiązaniem dla Ciebie.

Twój config będzie wyglądać następująco:

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

i wykorzystania:

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

---

Albo jeśli chcesz na przykład myLoader1 config być domyślnym i od czasu do wykorzystania czasu Ładowarki myLoader2 używają tego rodzaju konfiguracji:

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

// ... 

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

i używać tak:

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. Miałem podobne pytanie: here dla webpacka 1, ale dokumentacja mówi, że resolveLoader.alias działa tak samo.