Webpack 之 插件使用

| 自动化导入模块 require.context

遍历指定文件夹中的指定文件，进行自动导入，require.context 函数接受三个参数：

  • directory {String} -读取文件的路径
  • useSubdirectories {Boolean} -是否遍历文件的子目录
  • regExp {RegExp} -匹配文件的正则
// a context with files from the test directory that can be required with a request endings with `.test.js`.
require.context('./test', false, /\.test\.js\$/);
// a context with all files in the parent folder and descending folders ending with `.stories.js`.
require.context('../', true, /\.stories\.js$/);

require.context 函数执行后返回的是一个函数 fn，接受一个 req 参数，这个和 resolve 方法的 req 参数是一样的，即匹配的文件名的相对路径，fn 函数执行返回的是一个模块。fn 函数有 3 个属性：

  • resolve {Function} -接受一个参数 req，req 的值是 keys 方法返回的数组的元素。resolve 方法返回了一个字符串代表着传入参数的文件相对于整个工程的相对路径
  • keys {Function} -返回匹配成功模块的名字组成的数组
  • id {String} -执行环境的 id，返回的是一个字符串
const contexts = require.context('./', false, /\.js$/);
console.log('contexts', contexts); // 返回 webpackContext 函数
console.log(contexts.keys()); //  ["./1test.js", "./2test.js", "./3.js", "./index.js"]
console.log(contexts.id); // ./src/routers sync \.js$
console.log(contexts.resolve(contexts.keys()[0])); // ./src/routers/1test.js
console.log(contexts(contexts.keys()[0])); // 返回 module 模块

使用实例：

// 自动加载router文件夹下的所有js文件
const context = require.context('@/router', false, /\.js$/);
let routesConfig = [];
context.keys().forEach((v) => {
  if (v === './index.js') return;
  let obj = context(v);
  routesConfig = routesConfig.concat(obj[Object.keys(obj)[0]]);
});
// -------
contexts.keys().reduce((routes, key) => [...routes, ...contexts(key).default], [];);