[3] resolve（解析）一、作用 resolve选项能配置模块如何解析，实现路径优化二、resolve 几个属性

一、作用

resolve选项能配置模块如何解析，实现路径优化

解析模块，路径优化。

作用：创建 import 或 require 的别名，来确保模块引入变得更简单。
例如：一些位于 src/ 文件夹下的常用模块：

resolve: {
  alias: {
    '@': resolve('src'),
    '@modules': path.resolve(__dirname, './src/modules/'),
  },
},

说明：注意vue-cli中，@默认为src；在webpack.config.js中我们不能使用../ 以及./这种形式的路径方式，而是通过 path.join 和 __dirname 这种形式来表示路径，否则会报错。

作用：默认为false：允许没有扩展名；true：必须有扩展名
说明：建议为false，结合extensions属性一起使用

作用：自动解析确定的扩展名,能够使用户在引入模块时不带扩展名。默认值为：

extensions: [".js", ".json"]

例如：

import File from '../path/to/file(.js/json/ts)';

配置好后，就可以省略后缀名，否则如果你引入一个ts文件，就要写.ts。
说明：使用此选项，会覆盖默认数组，这就意味着 webpack 将不再尝试使用默认扩展来解析模块。

extensions: [".js", ".json", "ts"]

/ 绝对路径，开头不带.

./ 相对路径，本目录

../ 相对路径，上一级目录

.__dirname代表的是当前文件所在文件的绝对路径

path.resolve()方法可以将多个路径解析为一个规范化的绝对路径。

给定的路径的序列是从右往左被处理的，后面每个 path 被依次解析，直到构造完成一个绝对路径。

'@modules': path.resolve(__dirname, './src/modules/'), // D:\projectName\src\modules