webpack中exportsFields和mainFields的用法

resolve.exportsFields

默认值为['exports']，和 package.json中的exports对应

项目结构：

// webpack.config.js
resolve: {
  exportsFields: ['exports'],
},

// node_modules/aaaaa/package.json
{
	...
	"exports": {
		"./aa/bb": "./index.js"
	}
}

// node_modules/aaaaa/index.js
export const value = 10

// 引入 aaaaa 包中的 value 值
// src/index.js
import { value } from 'aaaaa/aa/bb'

console.log('value', value) // 10，实际的引入路径为：node_modules/aaaaa/index.js

当修改了exportsFields的值时，其值需要和 package.json 中的字段值一致，否则资源将无法查找到具体位置

// webpack.config.js
resolve: {
  exportsFields: ['myExports'],
},

// node_modules/aaaaa/package.json
{
	...
	"myExports": {
		"./aa/bb": "./index.js"
	}
}

// node_modules/aaaaa/index.js
export const value = 10

// 引入 aaaaa 包中的 value 值
// src/index.js
import { value } from 'aaaaa/aa/bb'

console.log('value', value) // 10，实际的引入路径为：node_modules/aaaaa/index.js

当不配置resolve.exportsFields的值时

// node_modules/aaaaa/aa/bb/index.js
export const value = 11

// 引入 aaaaa 包中的 value 值
// src/index.js
import { value } from 'aaaaa/aa/bb'

console.log('value', value) // 11，实际的引入路径为：node_modules/aaaaa/aa/bb/index.js

/**
 * 如果 aaaaa 的package.json中仍配置了exports{ "./aa/bb": "./index.js" }
 * 其value值将依旧为 10
 */

resolve.mainFields

target设置为 webworker ｜ web ｜ 未设置 时，默认值为：['browser', 'module', 'main']

target设置为其他值时，默认值为：['module', 'main']

// webpack.config.js 不设置 target 和 resolve.mainFields

// node_modules/aaaaa/package.json
{
	...
	"main": "index.js",
  "browser": "./aa/bb/index.js"
}

// src/index.js
import { value } from 'aaaaa'

console.log('value', value) // 11，实际的引入路径为：node_modules/aaaaa/aa/bb/index.js

设置 resolve.mainFields 为 ['main'] 时

// src/index.js
import { value } from 'aaaaa'

console.log('value', value) // 10，实际的引入路径为：node_modules/aaaaa/index.js

资源的查找路径优先根据 resolve.exportsFields ，再根据 resolve.mainFields。