Quand dois-je utiliser "utiliser" et "loader" dans Webpack 2 module.règles?

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 le 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 le 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!

Vous en remercie d'avance.

  • Bonjour, pourriez-vous envisager de ma réponse comme la meilleure réponse? Merci
InformationsquelleAutor TwistedSt | 2017-01-19
  1. 39

    Comme le Webpack 2 migration tutoriel unis, la différence entre les deux est que si quand nous voulons une gamme de chargeurs, nous devons utiliser use, si c'est juste un chargeur, alors 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"
        ]
      }
    ]
  }
    • Remarque: à l'aide de loaders par opposition à loader fonctionnera toujours, mais est maintenant considéré comme une option legacy webpack.js.org/guides/migrating/#chaining-loaders
    • Une grande réponse, merci. Vous avez de l'amour quand un outil déjà critiqué pour sa configuration complexe décide de le rendre encore difficile pour configurer par vous faire utiliser deux propriétés lorsque vous avez utilisé pour simplement être en mesure d'utiliser l'un 🙁
    InformationsquelleAutor Albert Olivé
  2. 11

    module.les règles est destiné aux chargeurs. La spécification d'une règle de chargeur est juste un raccourci pour 

    use: [{loader}]

    Pour les plugins, utilisez le plugins bien dans votre configuration.

    • Grâce à vous! Qui permet de.
    InformationsquelleAutor simon04