我什么时候在Webpack 2 module.rules中使用'use'和'loader'？

我正在将我当前的项目升级到Webpack2,之前它正在使用Webpack1.我已经看了几个关于升级的教程,总的来说,我明白了.

但是,我一直遇到的问题是,我不确定何时在指定模块规则(加载器)时使用'use'和'loader'.起初,我想use更换了loader.我理解这种语法:

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

然而,当我使用ExtractTextPlugin它时它似乎并不喜欢当它被认为是一个use.我试过这个:

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

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

在我解决其他问题之前,我会停在这里.有人可以帮忙解释一下我在这里缺少什么吗？随意询问您需要帮助的任何其他代码!

先感谢您.

1> Albert Olivé..：

---

正如Webpack 2迁移教程所述,两者之间的区别在于,如果我们想要一个加载器数组,我们必须使用use,如果它只是一个加载器,那么我们必须使用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"
        ]
      }
    ]
  }

---

注意:使用`loaders`而不是`loader`仍然有效但现在被认为是遗留选项https://webpack.js.org/guides/migrating/#chaining-loaders

---

很好的回答,谢谢.你必须喜欢它,因为一个已经因其复杂配置而受到批评的工具决定通过让你使用两个属性来配置甚至*更难*,而你曾经只能使用一个:(

2> simon04..：

---

module.rules适用于装载机.将规则指定loader为只是一个快捷方式

use: [{loader}]

对于插件,请使用plugins配置中的属性.