我啥时候在 Webpack 2 module.rules 中使用“use”和“loader”？

Posted 2023-02-22

【中文标题】我啥时候在 Webpack 2 module.rules 中使用“use”和“loader”？

【英文标题】：When do I use 'use' and 'loader' in Webpack 2 module.rules?我什么时候在 Webpack 2 module.rules 中使用“use”和“loader”？

【发布时间】：2017-06-04 16:17:34

【问题描述】：

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

不过，我一直遇到的问题是，我不确定在指定模块规则（加载程序）时何时使用“使用”和“加载程序”。起初，我以为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】：

正如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"
        ]
      
    ]
  

【讨论】：

注意：使用 loaders 而不是 loader 仍然可以使用，但现在被视为旧选项 webpack.js.org/guides/migrating/#chaining-loaders

很好的答案，谢谢。当一个已经因其复杂配置而受到批评的工具决定通过让您使用两个属性来使配置变得更加更难时，您必须喜欢它，而您过去只能使用一个属性:(

【参考方案2】：

module.rules 用于加载程序。将规则指定为loader 只是

的快捷方式

use: [loader]

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