​时下，前端领域Vue/React/Angular三剑客横行，一般来说，开发前端项目都会从这三个框架中选取一个，一些大厂甚至会基于这三大框架构建更适合业务的开发框架。

在之前的 demo 中，打包后的 dist 目录中的 index.html 是我们手动添加进去的，里面使用 <script> 引入 main.js 文件也是手写的，这是非常不方便的，此时就可以使用 HtmlWebpackPlugin 帮助我们解决这个问题了。

1. 进入网站 进入网站 Iconfont-阿里巴巴矢量图标库。 2. 如何使用 打开下载好的压缩包，可以看到里面长这个样子：

第一次进入页面时并没有加载lodash模块，当我点击页面时，浏览器再去加载lodash，并执行输出，这就是所谓的懒加载。

我们先引入一个应用场景，然后对这个场景进行分析，了解为什么需要拆分代码。首先，安装第三方库lodash，然后在代码分割.js中引入并编写业务代码。

看了官方文档之后发现splitChunks.chunks可以接收initial、async、all，很困惑这三种分割代码模式的区别，现在我们引入例子来探索一下：

用于开发的配置文件，配置热更新、跨域配置、端口设置等用于生产的配置文件，配置 js 压缩、代码拆分等虽然较大的项目可能仍然需要 2 个配置文件，但在 webpack4 中，你可以在没有一行配置的情况下完成

创建 vendor 文件夹，其中 minus.js、multi.js 和 sum.js 分别用 CommonJS、AMD 和 ES6 规范编写

转眼已经是2019年，短短三四年时间，webpack打包工具成为了前端开发中必备工具，曾经一度的面试题都是问，请问前端页面优化的方式有哪些？大家也是能够信手拈来的说出缓存、压缩文件、CSS雪碧图以及部署CDN等等各种方法，但是今天不一样了，可能你去面试问的就是，请问你是否知道webpack的打包原理，webpack的打包优化方…

最近由于项目需要，需要对已有的两个vue项目进行webpack3升级到webpack4，此处记录一下整个升级过程的几个重要步骤，以及遇到的问题和解决方案。