如何使用vue-cli3和ts结合webpack实现项目多入口多出口配置？

本文共计1299个文字，预计阅读时间需要6分钟。

最近公司有一个需求，需要在项目中嵌入H5页面，并且可能不止一个嵌入页面。因此，想尝试使用webpack的多入口多出口打包模式。网上查了很多资料，也找到了一些多入口多出口的案例。

最近公司有一个需求，需要在项目里面嵌套h5的页面，而且不止有一个嵌套的页面，那么就想办法运用webpack的多入口多出口的打包模式，网上查了很多资料，也有多入口多出口的案例，github上也有相应源码，我就不做过多讲解了。这里把博客贴出来vue多入口多出口打包，相应的多入口多出口的源码在 这里 。使用的是vue2.x + webpack3.x集成的多入口多出口，感兴趣的小伙伴可以看看。

然而，公司领导要求项目里面集成ts进行开发，对于字段的类型有更好的控制，所以在配合多入口多出口的前提下，还要配合ts进一步做一些调整。我本人开发路子可能前期走的野，反而加上tslint之后，被一堆类型检查，语法困扰，没法，要适应发展嘛。小女子只得从命。所以就做了一套在webpack3.x的基础上集成了ts，以及实现多入口多出口。当时时间比较紧张，从webpack3.x升级到webpack4.x，在实现上来说，还是遇到了一些困难。所以后面就没有继续研究了。

近期刚辞职，有一些时间然后也觉得webpack4.x发布也有1年多的时间了，还没有在项目中实战，不是一个合格的前端，终于下定决心要在webpack4.x上面指(hua)点(she)江(tian)山(zu)。

本文不对ts做一些解释，但是你如果要用ts做这个多入口的开发，那么请前往www.tslang.cn/docs/home.html，饱读经书 好吧！废话少说，那么现在进入正文：

一些安装vue-cli3的操作，如何初始化一个项目这里也不做讲解，因为我觉得网上的很多文章都说的很详细，我觉得没必要重写一份，还请自己搜索。

由于我是在ts的前提下写多入口多出口，在初始化项目的时候，已经安装了typescript。