webpack require context 说明

最新推荐文章于 2025-05-11 17:30:59 发布

weixin_34034670

最新推荐文章于 2025-05-11 17:30:59 发布

阅读量208

点赞数

CC 4.0 BY-SA版权

文章标签： webpack ViewUI

原文链接：https://juejin.im/post/5c6623e16fb9a049f66ca34a

本文深入探讨了使用require和require.context动态加载模块的方法，包括变量require的局限性、webpack的context功能，以及如何自定义正则规则实现灵活的文件加载。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用require.context 可以动态引入文件

一，使用require

1，完全使用变量 require（variable）

     const filename = ' ./dir/first-level.js';

      const func = require(filename);   // error can not find module .
复制代码

2, 部分使用变量 require( prefix + variable + suffix)

const filename = ' ./dir/first-level.js';
const func = require( '' + filename);   // =>error  编译超时或内存 溢出导致webpack进程退出
复制代码

3， webpack自动创建一个context ,引入了所有路径符合^./dir.*$ 的文件。

生成的bundle.js 中打包了所有的文件的内容。如果目录下存在非js文件，则需要通过配置正确的loader来引入。

const filename = ' /first-level.js'
const func = require( '.dir' + filename);// success 成功获取文件内容
复制代码

4，webpack自动创建一个context ，引入了所有路径符合 ^./di.*$的文件，生成的bundle.js中打包了所有文件的内容

const filename = 'r/first-level.js';
const func = require('./di' + filename);//  success 成功获取文件内容
复制代码

5，webpack自动创建一个context，引入了所有路径符合 ./dir ^./.*.js$的文件，生成的bundle.js 中打包了所有文件的内容

const filename = 'first-level';
const func = require('./dir/' + filename + '.js'); //success
复制代码

二、使用require.context 自定义正则规则，自己写一个require.context 参数：（相对的文件目录，true :包含子目录中的文件，引入文件匹配的正则表达式）

const context = require.context('./dir',true ,/\.js$/);
const keys = context.keys();//   ["./anthor-level.js","first-level.js"]
const filename = './first-level.js';
const func = context(filename); // success
复制代码

转载于:https://juejin.im/post/5c6623e16fb9a049f66ca34a