如何根据具体需要覆盖webpack装载机？

Question

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

由于我的应用程序只包含main.scss，所以我使用所有必要的加载器来处理该文件，并使用raw-loader加载任何其他scss文件以获得纯文本。

我遇到的问题是在对我的组件做同样的事情的时候。与我的样式不同，当我希望使用babel-loader呈现组件时，我需要包含组件，但我也希望将它们作为演示展示的纯文本导入。

一开始，我考虑在需求级别使用内联加载程序。

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

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

我想知道是否有一种方法可以定义一条规则来覆盖导入/要求语句。

根据webpack的文件

可以通过用!对整个规则进行前缀来覆盖配置中的任何加载程序。

不过，我找不到这方面的例子。我尝试了以下操作，它编译了，但在第一个!前缀要求之后立即崩溃，没有任何错误。

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',
      },
    ],
  },

file.jsx

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

我还考虑过使用fs读取文件，但不确定这是否有效。最后，该代码将全部由webpack编写，只有该包才能出版。这是正确的做法吗？

Answer 1

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