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

Question

我的 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）？

Module not found: Error: Cannot resolve module '[object Object]' in C:\Source\Poc\TestProj
@ ./index.js 7:14-38

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

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

Answer 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 文件。

Answer 2

加载程序是应用于应用程序资源文件的转换。它们是函数（node.js 中的运行），将资源文件的源作为参数，return 新源。

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

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

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

How to specify multiple loaders in Webpack plugin?

css

sass

webpack

extract-text-plugin