「前端」Webpack多入口配置

上周去到了公司实习，见识到了从来没有尝试过的Webpack多入口配置，能够实现不同HTML入口文件渲染不同内容的功能，简单写一篇博客记录一下。

首先我们用vue-cli创建一个新项目，默认情况下，新的项目只有一个入口（webpack.base.conf.js）：

我们可以在注释处，添加多一个入口文件（注意：这个入口文件指的是接管HTML的Vue实例所在的文件，即new Vue()）

接着，我们需要到webpack.dev.conf.js中，找到中文注释的这段代码：

代码中中文注释的地方，第一个new HtmlWebpackPlugin()中，是对原有的默认入口的配置，可以在下面加多一个配置，在filename中配置你希望访问的入口，比如我写的是test.html，那么我访问这个入口的时候，需要在浏览器的URL后面加上test.html。在template中配置你的模板HTML文件，即上面webpack.base.conf.js中你所配置的Vue实例所接管的HTML文件。

一切配置好后，重新执行npm run dev，试着在URL后面加上配置好的入口地址，就会发现你能够访问到另外一个页面了。

上面的配置是基于vue-cli 2.x的配置，升级到vue-cli 3.x后，配置的方式又不同了：

详细的部分可以转战这篇文章：https://juejin.im/post/5b75597f518825331755dfd4