webpack - require 概要

webpack 是一个预编译模块打包工具，它只会对使用到的模块进行打包。
一个模块是否被使用？可以根据该模块是否被 require 来判断。如果require时指定的是具体的模块名称与正确的路径，那么 webpack 便可以在编译打包时正确的引用到该模块。

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

如果 require的只是一个表达式（即需要运算才能得到结果），对于 webpack而言结果就不会精确了。

require('./img/' + name + '.jpg');

由变量 name 结合常量 ./img/ 与 .jpg 等构成的一个表达式，其最终的结果是需要执行才会得知的，但是 webpack本身又是一个预编译的打包工具，因此这里 webpack并不知道你最终会打包那个模块，所以在打包时就需要自己分析并提取出如下的关键信息：

• directory : ./img
• Regular expression : /^.*.jpg$/

当你在请求一个含有表达式的模块时，webpack并不能预先精准匹配到要打包的模块，所以它会自动创建一个上下文语句，这个上下文的起点就时你当前 require所处的 JS文件，然后根据你指定的目录与要匹配的模块类型（扩展名）来生成一个正则表达式，然后在根据这个正则匹配
将指定目录下的所有符合匹配条件的模块都打包进来。

由此我们可以说明 webpack可以通过require进行动态模块加载，但是会将指定匹配目录下的所有符合条件的模块都打包进来。

另外上下文语句还包含了一个将模块加载翻译成对应模块id的字典。以上例为例的话，它就类似于：

’./img/webpack.jpg‘ : 42,
'./img/nodejs.jpg':43,
'./img/express.jpg' :44

当然，你也可以手动创建一个上下文语句，通过手动创建上下文，你可以自定义一个模块打包范围。
首先，通过 require.context 来创建上下文，它接受三个参数，分别是“指定要打包的目录”，“是否搜寻子目录”，“匹配的正则”。
同样的，上下文的起点就是当前的JS文件。

var context = require.context('../img',false,/^.*\.jpg/);

console.log(context.keys()); //拿到匹配的到模块Map表。
console.log(context('./webpack.jpg'));//拿到最终打包好的模块。

总结：不论是自动创建上下文语句还是手动创建上下文语句，上下文语句本身就有不容忽视的作用，因为它可以在 webpack打包的默认流程中加入你自己额外定制的流程。

转载于:https://www.cnblogs.com/HCJJ/p/9347159.html