Quand dois-je utiliser 'use' et 'loader' dans Webpack 2 module.rules?

Question

Je me suis mise à niveau de mon projet actuel à Webpack2, dont il était l'aide de Webpack1 avant. J'ai regardé dans quelques tutoriels sur la mise à niveau et en général, je le comprends.

La question que j'ai garder en cours d'exécution, cependant, c'est que je ne suis pas sûr de quand utiliser "utiliser" et "loader" dans lors de la spécification du module de règles (les chargeurs). Au début, je pensais use remplacé loader. Je comprends que ce type de syntaxe:

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

Cependant, lorsque j'utilise l' ExtractTextPlugin il ne semble pas comme quand c'est consdiered un use. J'ai essayé ceci:

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

avec l' scssLoaders être:

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
    }
  }
];

Je vais arrêter là avant, je vais sur les autres problèmes. Quelqu'un peut-il aider s'il vous plaît expliquer ce que je suis en manque ici? N'hésitez pas à demander tout autre code dont vous avez besoin pour vous aider!

Je vous remercie à l'avance.

Answer 1

Comme l' indique le tutoriel de migration de Webpack 2 , la différence entre les deux est que, si nous voulons un tableau de chargeurs, nous devons utiliser use , s'il ne s'agit que d'un chargeur, nous devons utiliser 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"
        ]
      }
    ]
  }
 

Answer 2

module.rules est destiné aux chargeurs. La spécification d’une règle sous la forme loader n’est qu’un raccourci pour

 use: [{loader}]
 

Pour les plugins, utilisez la propriété plugins dans votre configuration.