何时在 Webpack 2 module.rules 中使用“use”和“loader”?

2024-03-31

我正在将当前项目升级到Webpack2,它正在使用Webpack1事先的。我研究了一些有关升级的教程,总的来说,我确实理解。

不过,我一直遇到的问题是,我不确定在指定模块规则(加载程序)时何时使用“use”和“loader”。起初我以为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 being:

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

在我开始讨论其他问题之前,我先到此为止。有人可以帮助解释我在这里缺少什么吗?请随时询问您需要帮助的任何其他代码!

先感谢您。


As the Webpack 2 迁移教程 https://webpack.js.org/migrate/3/#moduleloaders-is-now-modulerules状态,两者之间的区别在于,如果我们想要一个加载器数组,我们必须使用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"
        ]
      }
    ]
  }
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

何时在 Webpack 2 module.rules 中使用“use”和“loader”? 的相关文章

随机推荐

  • 从文件中读取最后一行

    我遇到了一个问题 我在 Linux 机器上有一个日志 其中写入了多个正在运行的进程的输出 这个文件有时会变得非常大 我需要读取该文件的最后一行 问题是此操作将经常通过 AJAX 请求调用 当该日志的文件大小超过 5 6MB 时 这对服务器来
  • PySpark PCA:避免 NotConvergedException

    我试图通过 ml linalg 方法使用 PCA 来减少广泛的数据集 51 个特征 约 1300 个个体 如下所示 1 将我的列命名为一个列表 features indi prep df select c for c in indi pre
  • bootstrap下拉菜单根据屏幕位置自动下拉?

    我想知道你们中是否有人已经准备好我所要求的东西 以帮助我摆脱麻烦 我正在寻找的是一个下拉菜单 可以根据其在屏幕上的位置自动添加下拉类 并且当用户滚动或调整窗口大小时也会自动更改 我正在寻找的内容已经在 bootstrap select 插件
  • .net Core amd Roslyn CSharpCompilation,类型“Object”在未引用的程序集中定义

    我正在尝试将一些 net 代码移植到新的 Core 运行时 但在移植一些即时编译时遇到了麻烦 要恢复 它总是要求我引用 System Runtime 和 mscorlib 但不知道如何引用它们 附带说明一下 我无法引用 Framework
  • 如何修复致命异常:Resources$NotFoundException:资源 ID #0x20c003b DeviceFormFactor.java 第 107 行 org.chromium.ui.base.DeviceFormFactor.a

    在 crashlytics 中得到这个 不知道问题出在哪里 Fatal Exception android content res Resources NotFoundException Resource ID 0x20c003b at a
  • 使用 JavaScript 加密本地存储的数据

    当我学习 JavaScript 和 HTML5 时 我正在尝试构建一个基本的测验应用程序 该应用程序会提出一些可在移动网络上运行的多项选择题 并且也可以作为使用 PhoneGap 的应用程序 当提出问题时 结果会存储在本地 我希望 Phon
  • java.lang.NoClassDefFoundError: org.joda.time.DateTime

    在 android 4 3 API 18 上启动应用程序时出现此错误 没有编译错误 并且库已添加到build gradle中 compile joda time joda time 2 9 2 在 android api 23 上工作没有问
  • Neo4j cpu 卡在 GC 上

    突然间 工作了一个月后 CPU 几乎没有使用 1 到 5 之间 neo4j 服务器在垃圾收集时 cpu 占用率达到 100 我在 ubuntu 4 处理器服务器上运行 neo4j entherprise 2 0 3 未嵌入 这是我的 neo
  • 将 XSD 导入 OpenAPI

    我的 XSD 文件中有一些模型定义 我需要从 OpenApi 定义中引用这些模型 由于文件太大 手动重新建模是不可能的 我需要将其放入构建系统中 这样如果 XSD 发生更改 我可以为 OpenApi 重新生成模型 架构 我尝试过并且几乎有效
  • Flutter - 每次关闭应用程序时存储对象列表的最佳方式?

    情况 我对 Flutter 和移动开发都很陌生 因此对 Dart 不太了解 我已经从有类似问题的人那里阅读了一些解决方案 但没有设法将这些解决方案应用于我自己的事情 问题 我有一个待办事项应用程序 它有 2 个对象列表 我想在用户重新打开应
  • 在 Eclipse/RCP 中定位工具栏

    我正在开发我的小型 RCP 应用程序 它需要一个自定义透视切换器来控制用户可以访问哪些视图 所以我在这里尝试添加一个带有几个按钮的工具栏来切换视角 我认为对这些内容进行一些控制的最佳方法是在 Application ActionBar Ad
  • 如何尽快有效地发出数千个网络请求

    我需要从 C 控制台应用程序发出 100 000 个轻量级 即小内容长度 Web 请求 我可以做到这一点的最快方法是什么 即在尽可能短的时间内完成所有请求 以及我应该遵循哪些最佳实践 我不能一劳永逸 因为我需要捕获响应 大概我想用async
  • MongoDB:匹配嵌套数组元素的计数

    我有一个简单的父子对象作为文档存储在 MongoDB 中 像 Order OrderItems 这样简单的东西 订单有一个 OrderItem 数组 我想要做的是查询满足一组条件的订单项目的数量 示例 在订单 999 中 找出数量为 3 的
  • PostgreSQL 立即选择值并递增

    我正在寻找以下可能的解决方案 我将数据存储在表中 以跟踪客户在数据库中想要的特殊增量编号 这是他们内部使用的特殊号码 我想要做的是当我选择它时自动增加表中的这个数字 因此 我不存在使用该系统的其他人使用相同 ID 号进行另一笔交易的问题 所
  • 使用内容重命名 PDF 文件的批处理脚本

    我有一个批处理脚本 用于提取 PDF 信息并重命名 PDF 该脚本对于 1 个 PDF 文件运行良好 但我需要直接在folder有很多 PDF 文件 那么该怎么做呢 该脚本需要针对每个 PDF 文件逐个运行 直至结束 一旦 PDF 文件被重
  • UWP,如何处理图像和缩放?

    我们有一个 Xamarin Forms 项目 它将在 Android iOS 和 UWP 上运行 在 Android 上 不同的文件夹中有许多不同的图像 以支持大量不同的屏幕 和 PPI 在 iOS 上 您有类似的系统 2x 3x 等 我一
  • Android 相机教程(使用 SurfaceView)

    这是我的示例代码 package newslab video server import android app Activity import android hardware Camera import android os Bundl
  • MUI:将分页移动到 DataGrid 的顶部?

    有谁知道我如何移动标准XGrid分页到表格上方 或者我是否必须创建自己的自定义分页而不使用内置的XGrid 没有公共 API 可以将分页组件放在顶部 但您可以使用以下 CSS 技巧 const useStyles makeStyles gr
  • 如何生成混淆矩阵并找出朴素贝叶斯分类器的误分类率?

    使用 R 中的虹膜数据集 我尝试将朴素贝叶斯分类器拟合到虹膜训练数据 以便我可以为朴素贝叶斯分类器生成训练数据集 预测与实际 的混淆矩阵 错误分类率是多少朴素贝叶斯分类器 到目前为止 这是我的代码 iris spl sample split
  • 何时在 Webpack 2 module.rules 中使用“use”和“loader”?

    我正在将当前项目升级到Webpack2 它正在使用Webpack1事先的 我研究了一些有关升级的教程 总的来说 我确实理解 不过 我一直遇到的问题是 我不确定在指定模块规则 加载程序 时何时使用 use 和 loader 起初我以为use被