vue打包成多个html页面,vue+webpack4多页面打包配置

多页面配置通常有两种形式，一种是多页面多配置，一种是多页面单配置。因为webpack(3.1以上)可以直接处理一个配置对象的数组，所以可以为每个页面单独写一份配置。

通常来讲，多配置的优点是配置灵活、独立，可以并行打包，从而提高打包速度，缺点是不能在多页面之间共享代码(一个页面加载了之后，下一个页面还得再加载一遍)；单配置的特点基本上是和多配置相对。具体使用哪一种形式，看具体业务情况。本文主要介绍的是单配置的形式。

1. 整体目录结构

为了便于打包，我们创建一个pages的文件夹，在其下创建一个个的子文件夹代表一个个页面，每个子文件夹中建立各自的spa应用体系，如图所示：

这样做的好处是，我们在配置webpack的打包入口时，比较好操作，而且这样的结构也较为清晰。

2. webpack配置

2.1 文件结构

创建base、dev、prod三个文件。我们在base文件中配置entry、output、loader、公共的plugin等，其余的根据开发环境和线上环境各自所需在各自不同的文件中增删改。

2.2 entry

根据整体目录结构，每个页面文件夹都有各自的入口js文件，我们在配置entry选项时，就可以按如下编码方式书写：/**

* 通过约定，降低编码复杂度

* 每新增一个入口，即在src/pages目录下新增一个文件夹，以页面名称命名，内置一个index.js作为入口文件

* 通过node的文件api扫描pages目录

* 这样可以得到一个形如{page1: "入口文件地址",