从开发服务器访问 webpack require.context答案

【问题标题】：Access webpack require.context from dev server从开发服务器访问 webpack require.context
【发布时间】：2022-11-04 18:09:38
【问题描述】：

我有一个 webpack 开发配置，用于通过 express 为模拟后端提供服务。像DevServer Docs 这样的例子：

module.exports = {
  // ...
  devServer: {
    setupMiddlewares: (middlewares, devServer) => {
      if (!devServer) {
        throw new Error('webpack-dev-server is not defined');
      }

      devServer.app.get('/setup-middleware/some/path', (_, response) => {
        response.send('setup-middlewares option GET');
      });
    },
  },
};

但是我没有直接在那里提供服务，而是加载并初始化另一个文件，该文件将尝试搜索名称中带有“mock.js”的每个文件并加载它们。为此，我计划使用require.context，因为它是一个 webpack 功能。但是每次我尝试这样做时，我都会得到上下文是不明确的.

我尝试像这样加载它们：

const context = require.context('../src/', true, /\.mock\.js$/);
const mocks = context.keys().map(context);

有没有办法重新实现这个功能？（或者至少有其他选择）我一直在环顾四周，但似乎没有多少人遇到过我的问题。

【问题讨论】：

标签： javascript node.js webpack node-modules

【解决方案1】：

尝试

const fs = require('fs');
const path = require('path');
if (typeof require.context === 'undefined') {
  require.context = (
    base = '.',
    scanSubDirectories = false,
    regularExpression = /.js$/
  ) => {
    const files = {};

    function readDirectory(directory) {
      fs.readdirSync(directory).forEach((file) => {
        const fullPath = path.resolve(directory, file);

        if (fs.statSync(fullPath).isDirectory()) {
          if (scanSubDirectories) readDirectory(fullPath);
          return;
        }

        if (!regularExpression.test(fullPath)) return;

        files[fullPath] = true;
      });
    }

    readDirectory(path.resolve(__dirname, base));

    function Module(file) {
      return require(file);
    }

    Module.keys = () => Object.keys(files);
    return Module;
  };
}

【讨论】：