web-dev-qa-db-fra.com

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

Je mets à niveau mon projet actuel vers Webpack2, qu'il utilisait Webpack1 auparavant. J'ai examiné quelques tutoriels sur la mise à niveau et en général, je comprends.

Le problème que je continue de rencontrer, cependant, est que je ne sais pas quand utiliser "use" et "loader" dans lors de la spécification des règles du module (chargeurs). Au début, je pensais que use avait remplacé loader. Je comprends ce type de syntaxe:

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

Cependant, lorsque j'utilise le ExtractTextPlugin, il ne semble pas aimer quand il s'agit d'un use. J'ai essayé ça:

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

scssLoaders étant:

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 m'arrêter ici avant de parler d'autres problèmes. Quelqu'un peut-il s'il vous plaît aider à expliquer ce qui me manque ici? N'hésitez pas à demander tout autre code dont vous avez besoin pour vous aider!

Merci d'avance.

webpackwebpack-2
33
TwistedSt

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, si ce n'est qu'un chargeur, alors nous doivent 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"
        ]
      }
    ]
  }
42
Albert Olivé

module.rules est destiné aux chargeurs. Spécifier une règle comme loader n'est qu'un raccourci pour

use: [{loader}]

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

11
simon04