webpack require context 說明
使用 require.context
可以動態引入檔案。參考官方文件,但是文件中的表述不甚清晰,因此我整理了幾種用法和結果。
先新建一個測試目錄,安裝 webpack。目錄結構如下:
使用 require
完全使用變數 require(variable)
程式碼如下:
const filename = './dir/first-level.js';
const func = require(filename); // => Uncaught Error: Cannot find module "."
WARNING in ./index.js 2:13-30 Critical dependency: the request of a dependency is an expression
結果:無法正確拿到檔案中的內容。
部分使用變數 require(prefix + variable + suffix)
第一種:
const filename = './dir/first-level.js';
const func = require('' + filename); // => Error
結果:編譯超時或記憶體溢位導致 webpack 程序退出。
這時 webpack 嘗試引入 .
目錄下的所有檔案,由於 node_modules
存在,因此會引入非常多的檔案導致問題。
第二種:
const filename = '/first-level.js'; const func = require('./dir' + filename); // => Success
結果:成功獲取檔案中的內容。
這時 webpack 自動建立了一個 context,引入了所有路徑符合 ^\.\/dir.*$
的檔案。生成的 bundle.js
中打包了所有的檔案的內容。如果目錄下存在非 js 檔案,則需要通過配置正確的 loader 來引入。
第三種:
const filename = 'r/first-level.js';
const func = require('./di' + filename); // => Success
結果:成功獲取檔案中的內容。
這時 webpack 自動建立了一個 context,引入了所有路徑符合 ^\.\/di.*$
bundle.js
中打包了所有的檔案的內容。
第四種:
const filename = 'first-level';
const func = require('./dir/' + filename + '.js'); // => Success
結構:成功獲取檔案中的內容。
這時 webpack 自動建立了一個 context,引入了所有路徑符合 ./dir ^\.\/.*\.js$
的檔案。生成的 bundle.js
中打包了所有的檔案的內容。
使用 require.context
在剛才的過程中,webpack 會建立一個 require.context
,通過正則匹配到可能的檔案,全部引入。如果我們想自定義這個正則規則的話,可以自己寫一個 require.context
。
第一種:
const context = require.context('./dir', true, /\.js$/);
const keys = context.keys(); // => ["./another-first-level.js", "./first-level.js", "./sub-dir/second-level.js"]
const filename = './first-level.js';
const func = context(); // => Success
結果:成功獲取檔案中的內容。
其中第一個引數表示相對的檔案目錄,第二個引數表示是否包括子目錄中的檔案,第三個引數表示引入的檔案匹配的正則表示式。
第二種:
const context = require.context('./dir', false, /\.js$/);
const keys = context.keys(); // => ["./another-first-level.js", "./first-level.js"]
const filename = './first-level.js';
const func = context(filename); // => Success
結果:成功獲取第一層目錄中的檔案內容,但是不能拿到子目錄中的檔案。
通過這個方式就可以解決引入不必要的 node_modules
中的檔案的問題。相關的程式碼如下:
var context = require.context('.', true, /^\.\/dir\/.*\.js$/);
console.log(context.keys());
const filename = './dir/first-level.js';
console.log(context(filename));
希望對大家理解動態 require
和 require.context
有幫助。
作者:vivaxy
連結:https://www.jianshu.com/p/78f7b19932cb
來源:簡書
簡書著作權歸作者所有,任何形式的轉載都請聯絡作者獲得授權並註明出處。