>[success] # webapck -- 模塊解析配置 1. 當通過 `import `或 `require `導入模塊的時候會進行文件位置查找，`webpack `使用 `enhanced-resolve` 來解析文件路徑 * 導出的文件如果是**絕對路徑**則直接匹配 * **相對路徑**，使用 import 或 require 的資源文件所處的目錄，被認為是上下文目錄，會拼接此上下文路徑，來生成模塊的絕對路徑 * **模塊路徑**在 `resolve.modules`中指定的所有目錄檢索模塊，所以默認會從`node_modules`中查找文件，如下例子 ~~~ import { ref } form 'vue' ~~~ * webpack 配置文件 ~~~ /** @type {import('webpack').Configuration} */ const config = { mode: 'production', entry: './src/index.js', output: { filename: 'bundle.js', }, resolve:{ modules:'aaaa' // 從node_modules 改成aaa } } module.exports = config ~~~ 2. 文件后綴如果省略，可以通過配置`resolve.extensions` 進行拼接,默認為 `['.wasm', '.js', '.json']` ~~~ import a from './zz/b' // 省略.js 后綴 ~~~ ~~~ /** @type {import('webpack').Configuration} */ const config = { mode: 'production', entry: './src/index.js', output: { filename: 'bundle.js', }, resolve: { extensions: ['.js', '.json', '.vue', '.jsx', '.ts', '.tsx'], }, } module.exports = config ~~~ 3. 如果是一個文件夾：會在文件夾中根據` resolve.mainFiles`配置選項中指定的文件順序查找`resolve.mainFiles`的默認值是` ['index']`，再根據 `resolve.extensions`來解析擴展名 4. 通過設置 `alias` 設置路徑別名 ~~~ resolve: { alias: { utils: path.resolve(__dirname, "./src/utils") } }, ~~~