webpack 搭建vue多单页应用

为何选择多单页

最近在核心业务上做了一项新的尝试，抛弃臃肿的PHP后端渲染的多页应用模式，全站改造单页应用。单页渲染在加载速度已经有了极大的提升，并且MVVM的模式使前端开发从繁琐的DOM操作中解放出来。为什么考虑多单页模式，可综合多页和单页的优势，多页分离减少模块耦合，特别是应用复杂程度高时，此后也可在每个单页里面尝试不同的方案，利于拓展。本文是记录多单页实践的思路，脚手架vue-cli生成，详细的代码可参考demo，欢迎探讨。

webpck搭建多单页

1.从入口文件`entry`说起

entry对象主要用于配置应用js入口文件，由模块名称为属性名（编译生成的js chunks的名称），以该js文件路径为属性值。以vue-cli搭建的单页应用为例，以下是初始配置。单页应用通常只有一个入口js文件（不包括其他公共js模块）。

多单页应用则有多个js入口文件，entry也要配置多个入口，如下： webpack.base.conf.js

  entry: {'index': './src/pages/main.js',// index.html 的入口文件'asset': './src/pages/asset/index.js',// 页面 asset.html 的入口文件'login': './src/pages/login/index.js',// 页面 login.html 的入口文件},
复制代码

当页面应用比较多的时候，可以引入glob模块，封装遍历函数。

//引入模块
var glob = require('glob');//遍历函数
function getEntry(globPath) {var entries = {},basename, tmp, pathname;//下面的路径根据自己的目录结构修改，打印出来检查是否跟手写的一致glob.sync(globPath).forEach(function (entry) {basename = path.basename(entry, path.extname(entry));console.log("basename",basename);tmp = entry.split('/').splice(-3);pathname = tmp.splice(0, 1) + '/' + tmp.splice(0, 1) + '/' + basename; // 正确输出js和html的路径entries[pathname] = entry;});return entries;
}//遍历pages路径下所有的main.js文件，所有的入口文件命名一致
var entries=getEntry('./src/pages/**/main.js');// 传值entry: entries,
复制代码

关于entry更详细的内容可参考官网。

2. 多页应用还需修改`HtmlWebpackPlugin`配置页面渲染模版

webpack.dev.conf.js

    new HtmlWebpackPlugin({//访问filename: 'pages/login/login.html',template: './src/pages/login/login.html',inject: true,//对应entry的chunks名称chunks:['login']}),new HtmlWebpackPlugin({filename: 'pages/asset/asset.html',template: './src/pages/asset/asset.html',inject: true,chunks:['asset']}),
复制代码

写成遍历： webpack.dev.conf.js

 var pages = getEntry('./src/pages/**/*.html');
for (var pathname in pages) {// 配置生成的html文件，定义路径等var conf = {filename: pathname + '.html',template: pages[pathname],   // 模板路径inject: true              // js插入html尾部};if (pathname in baseWebpackConfig.entry) {//这里配置当前单页需要加载的chunksconf.chunks = ['manifest', 'vendor',pathname];conf.hash = true;}devWebpackConfig.plugins.push(new HtmlWebpackPlugin(conf));
}//遍历函数
function getEntry(globPath) {var entries = {}, basename, tmp, pathname;glob.sync(globPath).forEach(function (entry) {basename = path.basename(entry, path.extname(entry));tmp = entry.split('/').splice(-3);pathname = tmp.splice(0, 1) + '/' + tmp.splice(0, 1) + '/' + basename; // 正确输出js和html的路径entries[pathname] = entry;});return entries;
}复制代码

webpack构建多单页一些踩过的坑

webpack打包后样式丢失 检查了好久发现是这2个插件冲突的问题，postCss loader 与 OptimizeCSSPlugin。解决：去掉下列代码。

    new OptimizeCSSPlugin({cssProcessorOptions: config.build.productionSourceMap? { safe: true, map: { inline: false } }: { safe: true }}),
复制代码

cannot find the element #app 单页页面加载了其他页面的入口文件，找不到对应的模版id导致。解决：在webpack配置，在前面HtmlWebpackPlugin配置只注入指定的chunks，这样就不会把其他页面的js也加载进来，导致找不到对应的html模版，也优化了加载。

   if (pathname in baseWebpackConfig.entry) {//这里配置当前单页需要加载的chunksconf.chunks = ['manifest', 'vendor',pathname];conf.hash = true;}
复制代码

多单页命名问题 多单页面vue应用根元素的id不能相同, 否则会出现页面互相覆盖的问题。

    new Vue({//根元素idel: '#app',components: { App },template: '<App/>'})
复制代码

css 到底是 import 还是 require 两种都是模块引入的方式，import使es6规范，require是commonJS规范，需要注意的是import会有提升效果，可能出现import覆盖require样式。

require('/style.css');
import '/style.css';
复制代码

多单页之间vuex数据不能共享 单页应用之间vuex数据是不能共享的，因为其本质还是多页应用。页面与页面之间的数据传递还是要通过URL传参数或者通过缓存读取。这在一定程度上还是增加了应用复杂度，所以在业务粒度的拆分上不能太细，尽量保证在单个业务流程是在一个单页内，数据可以共享。
考虑后续部署的问题 单页应用的部署很简单，只有一个html文件，采取多单页的方案，必须要提前跟运维沟通后续部署的问题，确保能实现平稳过渡。