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打包的默認流程中加入你本身額外定製的流程。