4.1.3 优化 resolve.mainFields 配置

4.1.3 优化 resolve.mainFields 配置

问题一：优化 resolve.mainFields 配置？

resolve.mainFields用于配置第三方模块使用哪个入口文件。
安装的第三方模块中都会有一个package.json文件用于描述这个模块的属性，其中有些字段用于描述入口文件在哪里，resolve.mainFields用于配置采用哪个字段作为入口文件的描述。

可以存在多个字段描述入口文件的原因是因为有些模块可以同时用在多个环境中，准对不同的运行环境需要使用不同的代码。

举例说明

以isomorphic-fetch为例，它是fetch API的一个实现，但可同时用于浏览器和 Node.js 环境。 它的package.json中就有2个入口文件描述字段：

{
  "browser": "fetch-npm-browserify.js",
  "main": "fetch-npm-node.js"
}

isomorphic-fetch 在不同的运行环境下使用不同的代码是因为 fetch API 的实现机制不一样，在浏览器中通过原生的fetch或者XMLHttpRequest实现，在 Node.js 中通过http模块实现。

resolve.mainFields的默认值和当前的target配置有关系，对应关系如下：

• 当target为web或者webworker时，值是["browser", "module", "main"]
• 当target为其它情况时，值是["module", "main"]

以target等于web为例，Webpack 会先采用第三方模块中的browser字段去寻找模块的入口文件，如果不存在就采用module字段，以此类推。

为了减少搜索步骤，在你明确第三方模块的入口文件描述字段时，你可以把它设置的尽量少。 由于大多数第三方模块都采用main字段去描述入口文件的位置，可以这样配置 Webpack：

module.exports = {
  resolve: {
    // 只采用 main 字段作为入口文件描述字段，以减少搜索步骤
    mainFields: ['main'],
  },
};

使用本方法优化时，你需要考虑到所有运行时依赖的第三方模块的入口文件描述字段，就算有一个模块搞错了都可能会造成构建出的代码无法正常运行。