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

Posted

技术标签:

【中文标题】如何在 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

【讨论】:

以上是关于如何在 Webpack 插件中指定多个加载器?的主要内容,如果未能解决你的问题,请参考以下文章

如何在数据框中指定缺失值

如何向具有多个加载器的 webpack 加载器添加查询?

如何在 maven jetty 插件中指定 JDK

如何使用 Spring Security SAML 插件在项目中指定 updatePasswordUrl,如 loginFormUrl = '/saml/login'

如何在构建脚本中指定链接器标志/参数?

如何在 Xcode 中指定表单完成后要加载的视图?