依赖管理

一、带表达式的 require 语句

request 含有表达式(expressions)，就会创建一个上下文(context)。

示例：

# 文件目录结构
example_directory
│
└───template
│   │   table.ejs
│   │   table-row.ejs
│   │
│   └───directory
│       │   another.ejs

当 require('./template/' + name + '.ejs'); 调用，webpack 进行解析，提取出如下信息：

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

context module(上下文模块)

会生成一个 context module(上下文模块)。它包含 目录下的所有模块 的引用。该 context module(上下文模块) 包含一个 map（映射）对象，会把 requests 翻译成对应的模块 id。

示例 map（映射）:

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

此 context module 还包含一些访问这个 map 对象的 runtime 逻辑。

这意味着 webpack 能够支持动态地 require，但会导致所有可能用到的模块都包含在 bundle 中。

二、require.context

你还可以通过 require.context() 函数来创建自己的 context module(上下文模块)。

可以给这个函数传入三个参数：一个要搜索的目录，一个标记表示是否还搜索其子目录， 以及一个匹配文件的正则表达式。

webpack 会在构建中解析代码中的 require.context() 。

语法如下：

require.context(
  directory,
  (useSubdirectories = true),
  (regExp = /^\.\/.*$/),
  (mode = 'sync')
);

示例：

require.context('./test', false, /\.test\.js$/);
//（创建出）一个 context，其中文件来自 test 目录，request 以 `.test.js` 结尾。

require.context('../', true, /\.stories\.js$/);
// （创建出）一个 context，其中所有文件都来自父文件夹及其所有子级文件夹，request 以 `.stories.js` 结尾。

Warning

传递给 require.context 的参数必须是字面量(literal)！

context module API

一个 context module 会导出一个（require）函数，此函数可以接收一个参数：request。

此导出函数有三个属性：resolve, keys, id。

• resolve 是一个函数，它返回 request 被解析后得到的模块 id。
• keys 也是一个函数，它返回一个数组，由所有可能被此 context module 处理的请求（译者注：参考下面第二段代码中的 key）组成。

如果想引入一个文件夹下面的所有文件，或者引入能匹配一个正则表达式的所有文件，这个功能就会很有帮助，例如：

function importAll(r) {
  r.keys().forEach(r);
}

importAll(require.context('../components/', true, /\.js$/));

const cache = {};

function importAll(r) {
  r.keys().forEach((key) => (cache[key] = r(key)));
}

importAll(require.context('../components/', true, /\.js$/));
// 在构建时(build-time)，所有被 require 的模块都会被填充到 cache 对象中。

• id 是 context module 的模块 id. 它可能在你使用 module.hot.accept 时会用到。

三、例子：自动配置路由

// router.js

const req = require.context('src/pages', true, /\.vue$/);
const names = req.keys();
const components = names.map(req);

const routerList = parseComponent(names, components);

function parseComponent(names, components) {
    const routerList = [];
    names.forEach((name, index) => {
        const path = name.replace(/^\.|\.vue$/g, '');
        const component = components[index].default;
        routerList.push({
            path,
            name: path,
            component,
        });
    });
    return routerList;
}



var routers= {
    mode: 'hash',
    base: '/',
    routes: [
        ...routerList
    ]
};
export default routers;