2017-01-19 12 views
17

Uaktualniam mój obecny projekt do Webpack 2, z którego wcześniej korzystał Webpack 1. Przejrzałem kilka tutoriali na temat aktualizacji i ogólnie rozumiem.Kiedy używam 'use' i 'loader' w Webpack 2 module.rules?

Problem, który napotykam, nie jest jednak pewny, kiedy używać "użytkowania" i "ładowacza" podczas określania reguł modułu (ładowarek). Na początku myślałem, że use zastąpiono loader. Rozumiem ten rodzaj składni:

module: { 
    rules: [{ 
    test: /\.scss$/, 
    use: [ 
     { 
     loader: 'postcss-loader', 
     options: { 
      plugins: ... 
     } 
     }, 
     'sass-loader' 
    ] 
    }] 
} 

Jednak kiedy używam ExtractTextPlugin nie lubią, kiedy to consdiered się use. Próbowałem to:

 { 
     test: /\.scss$/, 
     use: [ 
      { 
      loader: ExtractTextPlugin.extract({ 
       fallbackLoader: 'style-loader', 
       loader: scssLoaders 
      }) 
      }] 
     }, 

z istoty scssLoaders:

var scssLoaders = [ 
    { 
    loader: 'css-loader', 
    options: { 
     modules: true, 
     importLoaders: '2', 
     localIdentName: '[name]__[local]__[hash:base64:5]' 
    } 
    }, 
    { 
    loader: 'postcss-loader' 
    }, 
    { 
    loader: 'sass-loader', 
    options: { 
     outputStyle: 'expanded', 
     sourceMap: true, 
     sourceMapContents: true 
    } 
    } 
]; 

Ja po prostu zatrzymać tutaj zanim pójdę się o innych problemach. Czy ktoś może mi pomóc wyjaśnić, czego tu brakuje? Możesz poprosić o inny kod, który potrzebujesz, aby pomóc! Z góry dziękuję.

+0

Cześć, czy uważasz, że moja odpowiedź jest najlepszą odpowiedzią? Dzięki –

Odpowiedz

23

Jak Webpack 2 migration tutorial stanach, różnica między obu jest, że jeśli kiedy chcemy tablicę ładowarek, musimy użyć use, jeśli to tylko jedna ładowarka, wtedy musimy użyć loader:

module: { 
    rules: [ 
     { 
     test: /\.jsx$/, 
     loader: "babel-loader", // Do not use "use" here 
     options: { 
      // ... 
     } 
     }, 
     { 
     test: /\.less$/, 
     loader: "style-loader!css-loader!less-loader" 
     use: [ 
      "style-loader", 
      "css-loader", 
      "less-loader" 
     ] 
     } 
    ] 
    } 
+3

Uwaga: używanie 'loader' w przeciwieństwie do' loader' nadal będzie działać, ale obecnie jest uważane za starszą opcję https://webpack.js.org/guides/migrating/#chaining-loaders –

5

module.rules jest przeznaczona do ładowarek. Określenie reguły jako loader jest po prostu skrótem do use: [{loader}].

Dla wtyczek należy użyć właściwości plugins w swojej konfiguracji.

+0

Dzięki! To pomaga. – TwistedSt