[Vue]webpack的require与require.context

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

1.require

1.1完整路径的require语句：

require('tools'); //preset alias tools 
require('./js/main');

1.2带表达式的 require 语句：自动创建一个上下文(context)

如果你的 require参数含有表达式(expressions)，会自动创建一个上下文(context)，因为在编译时(compile time)并不清楚具体是哪一个模块被导入。

如：

require('./template/' + name + '.ejs');

webpack 解析 require() 的调用，提取出来如下这些信息：

Directory: ./template
Regular expression: /^.*\.ejs$/

会返回template目录下的所有后缀为.ejs模块的引用，包含子目录：

{
  "./table.ejs": 42,
  "./table-row.ejs": 43,
  "./directory/folder.ejs": 44
}

2.require.context：手动创建一个上下文(context)

require.context(directory, useSubdirectories = false, regExp = /^\.\//);

directory：指定要打包的目录；

useSubdirectories ：是否搜寻子目录；

regExp ：匹配的正则

例：

require.context("./test", false, /\.test\.js$/);
//（创建了）一个包含了 test 文件夹（不包含子目录）下面的、所有文件名以 `.test.js` 结尾的、能被 require 请求到的文件的上下文。

详情参照官网：https://webpack.docschina.org/guides/dependency-management/#带表达式的-require-语句


以上是 [Vue]webpack的require与require.context 的全部内容，
                        来源链接：
                            utcz.com/z/379053.html
回到顶部