一个简单的webpack多页面构建的demo讲解

首先对于很多熟悉webpack的小伙伴们来说，webpack构建单页面并不困难，但是由于webpack的‘all in one’的理念，这样在页面足够复杂、业务流程足够多的时候，那么打包的js文件相对来说会很大，会造成阻塞，使用户体验下降（主要是老板的体验）；

因此针对这种情况，除了非必要的单页面之外，我们可以构建多页面来实现跳转，而不是单纯的使用单页面来实现跳转。

本篇文章的思想主要在于用html-webpack-plugin（html模板插件）、extract-text-webpack-plugin（css分离模板）、webpack.optimize.CommonsChunkPlugin（模板-chunk插件。。应该叫这个），通过创建多个模板来构造加载不同js、css的html多页面

下面开始demo的讲解

1、首先说明项目的结构

项目名称叫morePage，其中分为几个模块：

package.json和webpack.config.js两个webpack的常用文件，这里就不说了；

主要讲解src下面的结构：

①css：主要放置css文件

②js：放置js文件，分为components（复用js文件），pages（对应页面的js文件）；

③index.html、index.js 主页面，也是其中一个页面而已

2、package.json文件 --依赖

主要使用html-webpack-plugin+extract-text-webpack-plugin

3、webpack.config.js  --webpack配置文件

①入口文件：

配置三个入口，aa、bb、index，分别对应我们的页面aa.html,bb.html,index.html

②输出：

输出到dest下；

③：devServer和modules:

④plugin（主要讲解之处）：

分离css文件，如果没有配置，会把css文件写入js中，很不好看（虽然还是有效果，但是不符合前端思想）

使用webpack.optimize.CommonsChunkPlugin，对相对应的入口文件进行代码公共部分的提取，其中name可以理解为打包为公共部分的js名，chunks为指定的子节点，意思是，把下面的入口的文件提取出公共部分，minChunks我是这样理解的：require多少次就会被放入commonChunk中；

使用这个插件就会把公共部分，和非公共部分分别打包出来，另外也能提取公共的css文件。

三个模板，使用html-webpack-plugin html模板插件，可以根据模板来生成不同的html,并且html的js文件以及css文件已经进行引入，就不需要人为的引入了（当然偶尔不需要某一块，又不想修改配制的时候，就需要手动修改）；

chunks 为加载的chunk，在上图中，我们aa、bb、index的入口都抽取了公共部分，因此我们需要在chunks中首先加载公共部分（‘verdors’） 然后根据需要加载相对应的其他chunk；

inject为你的js文件时加在头部还是body中

filename（字面意思）

templagte：模板位置

hash：是否跟有serach值（用于清除缓存，如果为true，则js文件修改后后面的index.js?dddsdfjkd2234 hash会被修改，用于清除缓存）

4、文件（主要看各个js文件，以及打包之后或运行后的效果）

①index.html(index的模板)

非常简单，主要是要来跳转到另外两个页面，下面来看看他的js文件

加载两个css文件，看看打包后的效果，其中common为通用文件，index为index的专属css文件；

②aa.html

html没什么好说的，主要就一个div 里面写了数字，主要看js文件

加载连个css文件，以及一个通用的js文件，通用js文件如下：

也就是说，这个组件也是个组件，那么其也会被打包进入公共模板中（只要达到条件minChunks）；

②bb.html跟aa.html几乎一致

以上就是关于这次demo的讲解，主要思想就是配置不同的模板，配合css分离以及chunk插件来实现多页面的跳转

下面是打包之后的效果

可以看到css分别打包出来，并且有个vendors作为通用模板，另外js文件也是各自有打包出来，也有公共模板，三个html也分别打包出来（本次任务解决）

附加demo的github地址：https://github.com/XH-chen/webpack-pages-demo.git