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打包的默认流程中加入你本身额外定制的流程。