webpack如何查找模塊依賴

【01】Webpack的文件加載分爲三種：

絕對路徑

好比require('/home/me/file')。
此時會首先檢查參數目標是否爲目錄，若是是目錄，則檢查package.json的main字段。

若是沒有package.json或者沒有main字段，則會用index做爲文件名。

通過上述過程，解析到一個絕對路徑的文件名，而後會嘗試爲其加上擴展名（擴展名可在webpack.config.js中設置），第一個存在的文件做爲最終的結果。

相對路徑

好比require('./file')。使用當前路徑或配置文件中的context做爲相對路徑的目錄。加載過程和絕對路徑類似。

模塊路徑

如require('module/lib/file')。會在配置文件中的全部查找目錄中查找。

對於複雜的模塊路徑，還能夠設置別名(resolve.alias)。

一個路徑解析配置的例子：
resolve.extensions

用於指明程序自動補全識別哪些後綴。第一個是空字符串，對應不須要後綴的狀況。

module.exports = {
    resolve: {
        root: [appRoot, nodeRoot, bowerRoot],
        modulesDirectories: [appModuleRoot], 
        alias: {
            'angular': 'angular/angular',
            'lodash': 'lodash/dist/lodash'
        },
        extensions: ['', '.js', '.coffee', '.html', '.css', '.scss']
    }
}
複製代碼

Webpack 中涉及路徑配置最好使用絕對路徑，建議經過 path.resolve(__dirname, "app/folder") 或path.join(__dirname, "app", "folder") 的方式來配置，以兼容 Windows 環境。

帶表達式的 require 語句

若是request 含有表達式(expressions)，會建立一個上下文(context)，由於在編譯時(compile time)並不清楚具體是哪個模塊被導入。

示例：

require("./template/" + name + ".ejs");
複製代碼

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

Directory: ./template
Regular expression: /^.*\.ejs$/複製代碼