[Vue]webpack的require與require.context

1.require

 

1.1完整路徑的require語句：

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

1.2帶表達式的 require 語句：自動創建一個上下文(context)

如果你的 require參數含有表達式(expressions)，會自動創建一個上下文(context)，因為在編譯時(compile time)並不清楚具體是哪一個模塊被導入。

如：

require('./template/' + name + '.ejs');

webpack 解析 require() 的調用，提取出來如下這些信息：

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

會返回template目錄下的所有后綴為.ejs模塊的引用，包含子目錄：

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

 

2.require.context：手動創建一個上下文(context)

 

require.context(directory, useSubdirectories = false, regExp = /^\.\//);

directory：指定要打包的目錄；

useSubdirectories ：是否搜尋子目錄；

regExp ：匹配的正則

例：

require.context("./test", false, /\.test\.js$/); //（創建了）一個包含了 test 文件夾（不包含子目錄）下面的、所有文件名以 `.test.js` 結尾的、能被 require 請求到的文件的上下文。

 

詳情參照官網：https://webpack.docschina.org/guides/dependency-management/#帶表達式的-require-語句