因为一些特殊的原因，可以在家休息多天，所以趁这个机会学习下不太熟悉的webpack。作为一个vue粉，也是在vue-cli中第一次开始使用了webpack，但是脚手架中配置好的只是一个单页面应用。在实际工作中，往往还是使用的是多页面，所以在使用webpack需要重新配置下。
至于为啥要使用构建，为什么选择webpack，这些请知乎，里面的大神会有详细解释，先来看下业务中需要的项目结构。

微信截图_20170602203323.png

在src中每个页面一个目录文件夹，在每个文件夹中js文件最为构建的入口文件，接下来配合webpack配置文件来详细看下。

微信截图_20170602204951.png

在配置文件中主要分为两个部分。上面第一个部分是一个webpack的基础配置项

image.png

基础配置项包含：
entry:入口文件。由于是多页面构建，所以在基础配置中，入口文件的value值暂时是个空值，它的值是什么会在后面的逻辑控制中讲到。
output:出口文件。path设置构建完成后文件的位置。filename最为多页面构建的文件名，[name]动态赋值，参数与前面设置的入口文件的文件名有关。
module:模块。在构建中加入不同的模块，通过对应的正则开始处理。例如，这里对js文件添加了babel模块，这样就可以愉快的玩耍es6了。
plugins:插件。插件存在的意义 就是去解决一下loader解决不了的事情。
devServer:配置之后，可以在本地起服务预览本地文件。如同搭建了一个node服务，提高了开发效率。
基础配置只是一个骨骼，主要逻辑如下：

微信截图_20170602212549.png

在单页面的构建中入口文件只会存在一个不存在多个的情况，这显然不符合多页面的构建。我的想法是获取到src子文件下的每个文件中的js文件，都作为一个入口文件。由于在entry中可以传入一个对象，所以通过遍历出所有脚本改成一个对象作为参数传入entry。
首先安装一个npm包——glob。通过glob.sync可以传入一个类似正则的匹配字符串，返回的数组中包含里所有匹配的文件地址，例如
[ './src/detail/index.js', './src/home/home.js' ]
通过遍历之后改成
{ detail: './src/detail/index.js', home: './src/home/home.js' }
这样作为多入口参数传进去。
同理，构建多页面文件中的html文件，我做的操作也是通过遍历之后传入插件中的参数配置。在构建html中遇到一个坑，就是每个页面中都把所有构建出来的js文件插入到了页面中。查看插件配置参数之后，发现chunks这个参数，这个参数可以匹配当前页面引入那些脚本。
就这样，所有基础的页面构建配置差不多就可以了，现在就可以跑一下试试。

微信截图_20170602220956.png

微信截图_20170602220941.png

通过node_modules/.bin/webpack-dev-server启动本地服务来看下效果

image.png