我什么时候在 Webpack 2 module.rules 中使用“use"和“loader"? [英] When do I use 'use' and 'loader' in Webpack 2 module.rules?

问题描述

我正在将我当前的项目升级到 Webpack2，它之前使用的是 Webpack1.我查看了一些关于升级的教程，总的来说，我理解.

I am upgrading my current project to Webpack2, which it was using Webpack1 prior. I have looked into a couple tutorials about upgrading and in general, I do understand.

不过，我一直遇到的问题是，在指定模块规则(加载程序)时，我不确定何时使用 'use' 和 'loader'.一开始我以为use代替了loader.我理解这种类型的语法:

The issue I keep running into, though, is I'm not sure when to use 'use' and 'loader' in when specifying the module rules (loaders). At first, I thought use replaced loader. I understand this type of syntax:

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

但是，当我使用 ExtractTextPlugin 时，它似乎不喜欢使用 use.我试过这个:

However, when I use the ExtractTextPlugin it doesn't seem to like when it's consdiered a use. I've tried this:

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

在我开始讨论其他问题之前，我会就此打住.有人可以帮忙解释一下我在这里缺少什么吗?随意询问您需要帮助的任何其他代码！

I'll just stop here before I go off about other problems. Can someone please help explain what I am missing here? Feel free to ask for any other code you need to help!

提前致谢.

推荐答案

作为 Webpack 2 迁移教程 指出，两者的区别在于，如果我们想要一个加载器数组，我们必须使用use，如果它只是一个加载器，那么我们必须使用 loader:

As the Webpack 2 migration tutorial states, the difference between both is, that if when we want an array of loaders, we have to use use, if it's just one loader, then we have to 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"?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！