webpack require.Context功能作用

余生长醉 提交于 2020-03-28 20:53:40
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-语句

  

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!