webpack5 库暴露的方式liabray.libraryTarget（library.type）设置不同值时的打包表现

参考地址：webpack output.library 的 16 种取值 - 掘金

webpack5打包设置输出为一个库时 配置将库暴露的方式有很多种，鉴于webpack5文档种缩写，使用output.library.type 做代理  ，不同配置时包的分析

webpack@5.89.0

1.前提

 es6 中 import  将文件内容作为一个对象引入,浏览器支持

common.js 中也是内容作为对象引入，但是仅在node中支持  ，webpack打包后通过代码实现对应的功能

不同的type值对应不同的使用环境，以下仅为个人理解

1.type=module          用于es6模块，基本用于浏览器使用

2.type=umd               测试支持 Commonjs、AMD 和全局变量引入

3.type=commonjs2    Commonjs  node中执行

其他请根据参考地址进行选择

测试打包代码：

export default { 
    value:'qwer1234',
    test(){
        console.error('测试' )
    }
}

 type=module

/*打包成es ，此时不需要output.library.name*/
output: {
    library: {type: 'module'}
},
/*webpack5 特性仍然是实验性  需要启用experiments*/
experiments: {
    outputModule: true,
},

打包后

var __webpack_exports__ = {};
/* harmony default export */ __webpack_exports__.Z = ({
  value: 'qwer1234',
  test() {
    console.error('测试');
  }
});
var __webpack_exports__default = __webpack_exports__.Z;
export { __webpack_exports__default as default };

//# sourceMappingURL=index.js.map

若开启代码压缩  就是最简单的es代码

var e={};e.Z={value:"qwer1234",test(){console.error("测试")}};var r=e.Z;export{r as default};
//# sourceMappingURL=index.js.map