reactjs - 如何根据特定需求重写 webpack 加载器？

Question

我正在构建一个文档网站，我想在其中显示演示代码片段。

对于样式，它真的很简单，因为我的应用程序仅包含 main.scss，所以我正在使用所有必要的加载器来处理该文件来编译它，以及任何其他使用 raw-loader 加载 scss 文件以获取纯文本文件。

我遇到的问题是目前对我的组件执行相同的操作。与我的样式不同，当我想使用 babel-loader 渲染组件时，我需要包含组件，但我也想将它们作为纯文本导入以用于演示展示。

起初我想在 require 级别妥协使用内联加载器

const componentCode = require('raw-loader!./path/to/component');

这种方法的问题是，当我尝试执行此导入时，该文件已经通过 babel-loader 运行，因此我得到的是文件的编译版本而不是原始版本。我尝试将 ?enforce=pre 作为查询参数传递给 raw-loader 内联，但这没有效果。

我想知道是否有一种方法可以定义规则来覆盖 import/require 语句。

根据webpack文档

It's possible to overwrite any loaders in the configuration by prefixing the entire rule with !.

但是，我找不到任何这样的例子。我尝试了以下方法，它编译但在第一个 ! 前缀的 require 之后立即崩溃，没有任何错误

webpack.coonfig.js

{
    test: /\.(js|jsx)$/,
    exclude: [/node_modules/],
    use: [
      {
        loader: 'babel-loader',
        options: {
          presets: ['env', 'react'],
        },
      },
    ],
  },
  {
    test: /!*\.(js|jsx)$/,
    enforce: "pre",
    use: [
      {
        loader: 'raw-loader',
      },
    ],
  },

文件.jsx

  const componentCode = require('raw-loader!./path/to/component');

我还考虑过使用 fs 读取文件，但不确定这是否可行。最后，代码将由 webpack 完整编译，并且仅发布包。这是正确的方法吗？

Answer 1

在 Webpack - ignore loaders in require()? 找到我的答案，基本上我需要!!在要求忽略预加载器并应用我的之前