[Vue]webpack的require与require.context

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-语句