形如vue.esm.js vue.runtime.js vue.js等多种标准的模块js是如何生成的？

Question

对于js模块化、webpack打包这一块我一直是比较混淆。

在很多开源的JS库中，为了方便开发者使用，常常分成了多种标准模块的js，比如:
vue.esm.js, vue.js, vue-i18n.common.js, vue-i18n.esm.browser.js以便使用不同的方式引入(import require script src)

我使用webpack打包的时候，如果在dev模式下会产生很多webapack模块化的代码，比如function __webpack_require__(moduleId) {}，而在prod的时候产生的.min.js的压缩后文件。但我想得到比如xx.esm.js文件。

大概想问的是：

我们在写源码的时候是分很多文件和文件夹的，这些支持不同引入方式的最终js是如何生成的，他们是使用什么打包工具打包的呢？望各位不吝赐教

Answer 1

1. webpack 打包的时候可以选择不同的 libraryTarget
2. 还有不同的 target
3. 用不同配置，多跑两遍就什么都有了
4. 当然，也可以用编译器针对每个文件独立编译，输出 esm 版本