2

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

有了这些样式，它真的很简单，因为我的应用程序只包含main.scss，所以我正在使用所有必要的加载器来处理该文件以编译它，并且使用 加载任何其他 scss 文件raw-loader以将文件作为纯文本获取.

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

起初我想在需要级别使用内联加载程序进行妥协

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

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

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

根据 webpack 文档

可以通过在整个规则前面加上 . 来覆盖配置中的任何加载器!。

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

webpack.coconfig.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 完整编译，并且只会发布捆绑包。这是正确的方法吗？

4

1 回答 1

2

在Webpack找到我的答案- 忽略 require() 中的加载程序？，基本上我需要！！在需要忽略预加载器并应用我的之前

于 2018-03-28T07:46:58.853 回答