resolve

resolve 用于配置模块如何解析.

resolve.alias

resolve.alias 用于创建import或require的别名，来确保模块引入变得更简单

配置

配置@使之代表./src目录

resolve:{
  alias:{
    "@":Path.resolve(process.cwd(),'./src')
  }
}

resolve.modules

resolve.modules 告诉 webpack 解析模块时应该搜索的目录

配置

使用绝对路径，只在node_modules目录中查找
```
resolve: {
  modules:['node_modules']
}
```

resolve.extensions

resolve.extensions 自动解析确定的扩展

配置

配置解析的扩展为.js、.jsx、.json

resolve: {
  extensions: [".js", ".jsx", ".json"],
}

resolve.mainFields

resolve.mainFields 当从 npm 包中导入模块时（例如，import * as D3 from "d3"），此选项将决定在 package.json 中使用哪个字段导入模块。根据 webpack 配置中指定的 target 不同，默认值也会有所不同。

配置

根据package.json中的main字段查找文件: 引入的依赖模块优先根据resolve.mainFields查找文件，首先查看有没有package.json文件，然后查看package.json中是否有main字段
```
resolve: {
  mainFields: ["main"],
}
```

resolve.mainFiles

resolve.mainFiles 解析目录时要使用的文件名

配置

配置解析目录时要使用index.js: 如果依赖模块没有 package.json文件、或者package.json中没有指定查找的字段resolve.mainFields,那么这时候根据resolve.mainFiles来查找文件
```
resolve: {
  mainFiles:['index']
}
```

resolve.fallback

resolve.fallback 当正常解析失败时，重定向模块请求。webpack 5 不再自动 polyfill Node.js 的核心模块，这意味着如果你在浏览器或类似的环境中运行的代码中使用它们，你必须从 NPM 中安装兼容的模块，并自己包含它们。以下是 webpack 在 webpack 5 之前使用过的 polyfill 包列表：

语法

方式一、引入对应的Node模块: 可以解决webpack5移除polyfill的问题

resolve: {
  fallback: {
    assert: require.resolve('assert'),
    buffer: require.resolve('buffer'),
    console: require.resolve('console-browserify'),
    constants: require.resolve('constants-browserify'),
    crypto: require.resolve('crypto-browserify'),
    domain: require.resolve('domain-browser'),
    events: require.resolve('events'),
    http: require.resolve('stream-http'),
    https: require.resolve('https-browserify'),
    os: require.resolve('os-browserify/browser'),
    path: require.resolve('path-browserify'),
    punycode: require.resolve('punycode'),
    process: require.resolve('process/browser'),
    querystring: require.resolve('querystring-es3'),
    stream: require.resolve('stream-browserify'),
    string_decoder: require.resolve('string_decoder'),
    sys: require.resolve('util'),
    timers: require.resolve('timers-browserify'),
    tty: require.resolve('tty-browserify'),
    url: require.resolve('url'),
    util: require.resolve('util'),
    vm: require.resolve('vm-browserify'),
    zlib: require.resolve('browserify-zlib'),
  },
},

方式二、将对应的Node置为false,关闭polyfill检查: 同样可以解决webpack5移除polyfill的问题

resolve: {
  fallback: {
    assert: false,
    buffer: false,
    console: false,
    constants: false,
    crypto: false,
    domain: false,
    events: false,
    http: false,
    https: false,
    os: false,
    path: false,
    punycode: false,
    process: false,
    querystring: false,
    stream: false,
    string_decoder: false,
    sys: false,
    timers: false,
    tty: false,
    url: false,
    util: false,
    vm: false,
    zlib: false,
  },
},

resolve.alias​

resolve.modules​

resolve.extensions​

resolve.mainFields​

resolve.mainFiles​

resolve.fallback​