webpack的require.context 【详解，快乐前端攻城狮】

webpack的require.context

清楚了这点之后，我们来看一下，这个方法到底有什么用？

其实这个方法就是用来实现自动化导入导出的。

先看它的调用参数

require.context(directory, useSubdirectories, regExp)

  1. directory: 要查找的文件路径
  2. useSubdirectories: 是否查找子目录
  3. regExp: 要匹配文件的正则

先来看一段代码

const requireApi = require.context(".",true,/\.js$/);
console.log(requireApi.keys());

工程目录如上

这是webpack自带的方法，当然要打包，并且打包结果里不会有require.context的代码

这是打包后的运行结果

[ './index.js', './js/a.js', './js/b.js' ]

可以看出来它递归查找了当前目录下所有以.js结尾的文件的路径。

const requireApi = require.context(".",true,/\.js$/);
requireApi.keys().forEach((key, index) => {
	if (key === './index.js') return; // 不将当前文件进行导入
	Object.assign(module, requireApi(key)); // 将所有导出结果混入当前文件的module对象
})

console.log(module);
console.log(module.b);

然后我们到webpack打包后结果去看一下。

{
  i: './src/index.js',
  l: false,
  exports: {},
  deprecate: [Function (anonymous)],
  paths: [],
  children: [],
  loaded: [Getter],
  id: [Getter],
  webpackPolyfill: 1,
  a: 1,
  b: 2
}
2