>[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") } }, ~~~