resolve-main-fields

resolve-main-fields

node_modules/vue/package.json

{
  "main": "dist/vue.runtime.common.js",
  "module": "dist/vue.runtime.esm.js",
  // ...
}

vue 的 package.json 中設有 main 與 module 兩個入口點。

webpack.config.js

const path = require('path');

module.exports = {
  resolve: {
    mainFields: ['browser', 'module', 'main'],
  },
  stats: {
    orphanModules: true,
  },
};

決定使用 node_modules 中的入口點順序，依序是 browser 、 module 與 main 。

加上 stats.orphanModules 是為了輸出引入資訊。

src/index.js

import Vue from 'vue';

console.log(Vue.version);

引入 vue 模組。

結果

asset main.js 63.7 KiB [emitted] [minimized] (name: main) 1 related asset
runtime modules 221 bytes 1 module
./src/index.js + 1 modules 224 KiB [built] [code generated]
./node_modules/vue/dist/vue.runtime.esm.js 223 KiB [orphan] [built]

依照 webpack resolve.mainFields 入口點配置的順序，會取 vue.runtime.esm.js 作為入口引入 vue 。