细说webpack 5. webpack的常见配置(下)

大家好！我是萝卜，上篇介绍了与 entry 和 output 相关的配置，这一篇将介绍 Webpack 其他重要配置。

resolve

Webpack 进行构建的时候会从入口文件（entry）开始遍历寻找各个模块的依赖，resolve 配置是帮助 Webpack 查找依赖模块的，通过 resolve 的配置，可以帮助 Webpack 快速查找依赖，也可以替换对应的依赖（比如开发环境用 dev 版本的 lib 等）。下面来介绍下常用的 resolve 配置。

1.resolve.extensions

resolve.extensions是帮助 Webpack 解析扩展名的配置，默认值：['.wasm', '.mjs', '.js', '.json']，所以我们引入 js 和 json 文件，可以不写它们的扩展名，通常我们可以加上 .css、.less等，但是要确保同一个目录下面没有重名的 css 或者 js 文件，如果存在的话，还是把路径写全吧。

module.exports = {
  resolve: {
      extensions: [‘.js’, ‘.json’, ‘.css’]
  }
}

2. resolve.alias

resolve.alias 是最常用的配置，通过设置 alias 可以帮助 webpack 更快查找模块依赖，而且也能使我们编写代码更加方便。例如，我们在实际开发中经常会把源码都放到src文件夹，目录结构如下：

src 
├── lib 
│ └── utils.js 
└── pages 
└── demo 
└── index.js

在 src/pages/demo/index.js 中如果要引用 src/lib/utils.js 那么可以通过：import utils from '../../lib/utils' ，如果目录更深一些，会越来越难看，这时可以通过设置 alias 来缩短这种写法，例如：

module.exports = {
  resolve: {
      src: path.resolve(__dirname, ‘src’),
     ‘@lib’: path.resolve(__dirname, ‘src/lib’)
  }
}

经过设置了 alias，我们可以在任意文件中，不用理会目录结构，直接使用 require('@lib/utils')或者 require('src/lib/utils') 来帮助 Webpack 定位模块。

Tips：alias 的名字可以使用 @ ! ~等这些特殊字符，实际使用中 alias 都使用一种，或者不同类型使用一种，这样可以跟正常的模块引入区分开，增加辨识度。

3. resolve.mainFields

有一些我们用到的模块会针对不同宿主环境提供几份代码，例如提供 ES5 和 ES6