我正在建立一个文档网站，我想在其中显示演示代码段。
使用样式，它非常简单，因为我的应用程序只包含main.scss，所以我用所有必要的加载器处理该文件来编译它，以及任何其他scss文件是使用raw-loader加载以将文件作为纯文本加载。
我遇到的问题是与我的组件做同样的事情。与我的样式不同，我需要在我想使用babel-loader渲染它们时包含我的组件，但我也想将它们作为纯文本导入演示展示。
首先，我想到了在需求级别使用内联加载程序的妥协
const componentCode = require('raw-loader!./path/to/component');
这种方法的问题是，当我尝试执行此导入时，该文件已经通过babel-loader运行，因此我获得了文件的编译版本而不是原始版本。我尝试将?enforce=pre作为查询参数传递给raw-loader内联，但这没有效果。
我想知道是否有一种方法可以定义规则来覆盖import / require语句。
根据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完整编译，只发布捆绑包。这是正确的做法吗？