webpack多頁面配置之自動獲取入口函式
阿新 • • 發佈:2018-11-05
起初上手webpack大多是進行單頁面的配置,但還是會遇到多頁面的專案,關於多頁面的配置我會有一篇單獨的文章來進行介紹,今天我們來共同學習一下webpack多頁面配置中的自動獲取入口的方法。
先看一下實現方式吧:
var path = require('path');
var fs = require('fs');
module.exports =function getEntrys() {
var matchs;
var files = {};
var entry = [];
var modules = path.resolve(__dirname, './src/modules/' );
var dirs = fs.readdirSync(modules);
dirs.forEach(function(item, index) {
var itemPath = path.resolve(modules, item);
var sta = fs.statSync(itemPath);
if (sta.isDirectory()) {
var filesDir = fs.readdirSync(itemPath);
filesDir.forEach (function(val, index) {
matchs = /(.+)\.js$/g.test(val);
if (matchs) {
var prname = val.split('.')[0];
files[prname] = path.resolve(itemPath, val);
}
});
}
});
return files;
};
入口檔案的目錄如圖:
這個函式可以獲取入口檔案所在的目錄。然後將其用在webpack的配置中就ok啦。
函式關鍵語法講解
path.resolve
path.resolve方法用於將相對路徑轉為絕對路徑
它可以接受多個引數,依次表示所要進入的路徑,直到將最後一個引數轉為絕對路徑。如果根據引數無法得到絕對路徑,就以當前所在路徑作為基準。除了根目錄,該方法的返回值都不帶尾部的斜槓。
// 格式
path.resolve([from ...], to)
// 例項
path.resolve('foo/bar', '/tmp/file/', '..', 'a/../subfile')
上面程式碼的例項,執行效果類似下面的命令。
$ cd foo/bar
$ cd /tmp/file/
$ cd ..
$ cd a/../subfile
$ pwd
__dirname
__dirname:全域性變數,儲存的是檔案所在的檔案目錄
fs.readdirSync
方法將返回一個包含“指定目錄下所有檔名稱”的陣列物件。
fs.statSync(path,callback)
引數:
1)、path為檔案的路徑
2)、callback:回撥函式 ,有兩個引數,err:在獲取檔案資訊失敗時,會儲存錯誤資訊,stats:儲存檔案資訊的引數。
stats:是fs.stats()物件,執行fs.stat後將stats類例項返回給其回撥函式 ,因此可以通過stats物件上的isFile()方法來判斷讀取的是否為檔案(而不是資料夾)
var fs=require('fs')
fs.stat('./router',function(err,stats){ //讀取router資料夾
console.log(stats.isFile()) //判斷資料夾是否為檔案; 返回false
})