concepts - ¿Cuándo uso ''use'' y ''loader'' en Webpack 2 module.rules?

webpack tutorial

Question

Estoy actualizando mi proyecto actual a Webpack2 , que estaba usando Webpack1 anteriormente. He examinado un par de tutoriales sobre la actualización y, en general, entiendo.

Sin embargo, el problema con el que me estoy topando es que no estoy seguro de cuándo usar ''use'' y ''loader'' cuando se especifican las reglas del módulo (loaders). Al principio, pensé use loader reemplazado. Entiendo este tipo de sintaxis:

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

Sin embargo, cuando uso ExtractTextPlugin no parece gustarle cuando se considera un use . He intentado esto:

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

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

Me detendré aquí antes de que me vaya por otros problemas. ¿Puede alguien ayudar a explicar lo que me estoy perdiendo aquí? ¡Siéntase libre de pedir cualquier otro código que necesite para ayudar!

Gracias de antemano.

Answer 1

Como indica el tutorial de migración de Webpack 2 , la diferencia entre ambos es que si cuando queremos un conjunto de cargadores, tenemos que use , si es solo un cargador, entonces tenemos que usar el 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 es para cargadores. Especificar una regla como loader es solo un acceso directo para

use: [{loader}]

Para los complementos, use la propiedad de plugins en su configuración.