如何巧妙地限制 Webpack `require.context`？

Question

我正在 static site generator 基于 Webpack 和 React 进行一些开发。目前，我正在使它更具活力。其中一部分是使其更具可配置性。

给定这样的站点结构

.
├── _book
├── assets
├── build
├── drafts
├── manuscript
├── node_modules
├── pages
├── project_source
└── styles

我只需要来自某个或某些目录的文件。在这种情况下，需要来自 manuscript 的 Markdown 文件就足够了。天真地 var req = require.context('manuscript', true, /^\.\/.*\.md$/) 会起作用。

问题是当我通过站点生成器配置传递目录时，这需要变成动态的。由于 require.context 依赖于固定值，我想我需要使用 var req = require.context('.', true, /^.*\.md$/) 之类的东西将上下文更改为站点根目录，然后检查 req.keys() 以匹配我的配置。

实际上这是非常慢的，因为它会遍历整棵树！特别是 node_modules 可以包含很多文件，这是应该不惜一切代价避免的事情。

有没有一种巧妙的方法可以将 node_modules 从 require.context 中排除？我想某种形式的 Regex 可能会起作用，尽管我对其他想法持开放态度。

Answer 1

我最终通过将 require.context 推到静态站点生成器外部和外部配置中解决了这个问题。我那里有这样的小片段：

paths: {
    demo: {
        path: function() {
            return require.context('./demo', true, /^\.\/.*\.md$/);
        },
    }
}

然后在生成器端我只使用这些上下文。

这不是我希望的解决方案，但它确实有效。

Answer 2

你可以试试：

var req = require.context('.', true, /^((?![\/]node_modules|vendor[\/]).)*\.md$/);

从匹配中排除包含 node_modules 和 vendor 文件夹的路径。

如何巧妙地限制 Webpack `require.context`？

How to restrict Webpack `require.context` neatly?

javascript

webpack