[webpack问题]TypeError: __webpack_require__(...).context is not a function

require.context(directory,useSubdirectories,regExp)

• directory:表示检索的目录
• useSubdirectories：表示是否检索子文件夹
• regExp:匹配文件的正则表达式,一般是文件名

例如 require.context("@/views/components",false,/.vue$/)

使用场景

大量加载某些文件的时候

批量注册组件

// 自定义组件
const requireComponents = require.context('@/components', true, /\.vue/)
// 遍历出每个组件的路径
requireComponents.keys().forEach(fileName => {
  // 组件实例
  const reqCom = requireComponents(fileName)
  // 截取路径或者组件的name作为组件名
  const reqComName =reqCom.name|| fileName.replace(/\.\/(.*)\.vue/,'$1')
  // 组件挂载 或者其它地方挂载
  Vue.component(reqComName, reqCom.default || reqCom)
})

批量加载国际化文件

  const modules= {};
  const contextList=[];
  try {
    // 导入 @/views 下文件，包含子目录，文件名为：[/\\]locales[/\\]([a-z]{2})-?([A-Z]{2})?\.ts
    //require.context("查找目录"，是否查找子文件夹，符合规则的正则表达式) 
    //require.context不能在循环中使用,因为require.context的参数只能使用字面值，不能使用变量代替
    // 公共内容
    const folderRequireContext: __WebpackModuleApi.RequireContext = require.context("../router",true,/[/\\]locales[/\\]([a-z]{2})_?([A-Z]{2})?\.ts$/);
    contextList.push(folderRequireContext);
    //页面
    const commonRequireContext: __WebpackModuleApi.RequireContext = require.context("../views",true,/[/\\]locales[/\\]([a-z]{2})_?([A-Z]{2})?\.ts$/);
    contextList.push(commonRequireContext);

    contextList.forEach(requireCtx=>{
      requireCtx.keys().forEach(fileName => {
        // 获取内容
        const modulesConent = requireCtx(fileName);
        if (modulesConent.default) {
          // 获取 PascalCase 命名
          const modulesName = fileName.replace(/(.*\/)*([^.]+).*/gi, "$2");
          if (modules[modulesName]) {
            Object.assign(modules[modulesName],modulesConent.default)
          } else {
            modules[modulesName] = modulesConent.default;
          }
        }
      });
    })

  } catch (error) {
    console.log(error);
  }
  return modules;

实际应用

报错信息

TypeError: webpack_require(…).context is not a function
at importAllMocks (mock.ts?61ca:28)
at eval (mock.ts?61ca:40)
at Module…/src/config/mock.ts (app.js:173)
at webpack_require (app.js:1673)
at fn (app.js:1955)
at eval (main.ts?cd49:11)
at Module…/src/main.ts (app.js:206)
at webpack_require (app.js:1673)
at app.js:2864
at Function.webpack_require.O (app.js:1722)

报错相关代码

const localesFolderReg = new RegExp(/(mock)_?([A-Z]*)?.ts$/,“g”);
require.context("…/views",true,localesFolderReg );

报错分析 & 解决方案

Warning

The arguments passed to require.context must be literals!

require.context("…/views",true,/(mock)_?([A-Z]*)?.ts$/);

因此，require.context不能在循环中使用,因为require.context的参数只能使用字面值，不能使用变量代替