webpack require context 说明

使用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