因为一些特殊的原因，可以在家休息多天，所以趁这个机会学习下不太熟悉的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
就这样，一个最最最最基础的webpack构建多页面应用（MPA）就差不多了，都是自己研究，所以存在一点错误或者解释不对的地方，请留下评论。还有很多没去看的 比如css的单独打包，配置几个不同的开发环境，图片压缩等，在后续学习之后会持续更新。
Github:https://github.com/lyf911010/practice/tree/master/webpack_exe
网友评论