require.context笔记

最新推荐文章于 2024-09-04 16:01:00 发布

原创最新推荐文章于 2024-09-04 16:01:00 发布 · 247 阅读

0 ·

CC 4.0 BY-SA版权

vue 同时被 2 个专栏收录

59 篇文章

订阅专栏

webpack

9 篇文章

订阅专栏

本文深入探讨了Webpack API——require.context()的功能与使用方法。该API能够自动引入指定文件夹内的所有符合特定条件的文件，极大提升了前端工程的自动化水平。文章详细解释了其三个参数的作用，并通过实例展示了如何利用keys()方法获取并处理所有匹配的模块。

require.context是webpack的一个api，用于实现前端工程自动化

用于自动引入指定文件夹里的指定文件

require.context接收3个参数：require.context('./test', false, /.test.js$/)

第一个参数是文件的路径

第二个参数为是否读取文件夹的子目录

第三个参数是匹配文件的正则

require.context执行后返回一个函数，函数包含以下三个属性

resolve，keys，id

resolve 是一个函数，返回已解析请求的模块ID
keys 是一个函数，它返回上下文模块可以处理的所有可能请求的数组（匹配成功模块的名字组成的数组）。
id是上下文模块的模块ID。这可能对有用module.hot.accept

keys用法示例：

const modulesFiles = require.context('./modules', true, /\.js$/)
const modules = modulesFiles.keys().reduce((modules, modulePath) => {
  const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
  const value = modulesFiles(modulePath)
  modules[moduleName] = value.default
  return modules
}, {})