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$/