如何在 Webpack 插件中指定多个加载器？

Posted 2023-03-06

【中文标题】如何在 Webpack 插件中指定多个加载器？

【英文标题】：How to specify multiple loaders in Webpack plugin?

【发布时间】：2017-06-02 05:30:40

【问题描述】：

我的 Webpack 配置包含以下加载器。

module: 
  loaders: [
     test: /\.js$/, loader: "babel", exclude: /node_modules/ ,
     test: /\.sass$/, loaders: ["style-loader", "css-loader", "sass-loader"], exclude: /node_modules/ 
  ]
,

然后，我希望将 CSS 提取到一个单独的文件中，并尝试使用 extract text webpack plugin，像这样交替我的配置。

var ExtractTextPlugin = require("extract-text-webpack-plugin");

module: 
  loaders: [
     test: /\.js$/, loader: "babel", exclude: /node_modules/ ,
    //  test: /\.sass$/, loaders: ["style-loader", "css-loader", "sass-loader"], exclude: /node_modules/ 
    
      test: /\.sass$/,
      loader: ExtractTextPlugin.extract(
        
          loaders: ["css-loader", "sass-loader"],
          fallbackLoader: "style-loader"
        
      ),
      exclude: /node_modules/
    
  ]
,
plugins: [new ExtractTextPlugin("global.css")],...

但是，它失败了。可能是因为我没有正确指定装载机。如何指定多个加载器（一个用于 SASS，一个用于 CSS）？

找不到模块：错误：无法解析 C:\Source\Poc\TestProj 中的模块“[object Object]” @ ./index.js 7:14-38

我已经检查了文件 index.js 但我看不出有什么问题。它实际上是空导出，如下所示。对 7:14-38 的引用对我没有任何意义。文件中没有那么多行，甚至......

import CssGlobal from "./global.sass";
//document.write("Banana!");
export default 

【参考方案1】：

ExtractTextPlugin.extract() 的这种语法显然只适用于 webpack2 及更高版本（一个对象作为参数）。检查这个issue。

为了使它与webpack1一起工作，语法是：

ExtractTextPlugin.extract([notExtractLoader], loader, [options])`

notExtractLoader（可选）当不提取 css 时应该使用的加载器（即，当 allChunks 时在附加块中： 假）

loader 应该用于将资源转换为 css 导出模块的加载器。

来源：https://github.com/webpack/extract-text-webpack-plugin/blob/webpack-1/README.md

所以，一个有效的配置文件应该是：

var ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = 
    /* ... */
    module : 
          loaders: [
             test: /\.js$/, loader: "babel", exclude: /node_modules/ ,
             
                test: /\.sass$/, 
                exclude: /node_modules/,
                loader: ExtractTextPlugin.extract("style-loader", "css-loader!sass-loader")
               /* using ExtractTextPlugin.extract(["css","sass"]) works too */

            
          ]
    ,
    plugins: [
        new ExtractTextPlugin("styles.css")
    ]   

这将生成一个styles.css 文件。

【讨论】：

谢谢。我现在成功了，谢谢你。只是快速跟进。我被告知大喊语法style!css!sass 是不好的，应该避免。在你的例子中这是一个必要的邪恶（因为它不能以不同的方式完成）？或者你会说你支持它，甚至？

@AndyJ 不客气。您确实可以将数组作为参数传递。我用那个选项更新了我的答案。我搜索了 webpack1 文档并没有找到推荐的方法（docs 使用 css-loader!sass-loadersyntax）。由于某种原因，我不能说这是否是一种不好的方法（除了丑陋的代码），真的不知道。

【参考方案2】：

加载器是应用于您应用的资源文件的转换。它们是以资源文件的源为参数并返回新源的函数（在 node.js 中运行）。

例如，您可以使用加载器告诉 webpack 加载 CoffeeScript 或 JSX。

这里解释得很好 http://ui-codeman.blogspot.in/2017/02/webpack.html?view=sidebar