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

Question

我正在将我当前的项目升级到 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
    }
  }
];

在我开始讨论其他问题之前，我会在这里停下来。有人可以帮忙解释一下我在这里缺少什么吗？随时询问您需要帮助的任何其他代码！

提前致谢。

Answer 1

module.rules is meant for loaders. Specifying a rule as loader 只是

的快捷方式

use: [{loader}]

对于插件，请在您的配置中使用 plugins 属性。

Answer 2

如Webpack 2 migration tutorial所述，两者的区别在于，如果我们想要一组加载器，我们必须使用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"
        ]
      }
    ]
  }

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

When do I use 'use' and 'loader' in Webpack 2 module.rules?

webpack

webpack-2