vue官方提供了几个vue cli的模版，但都单页面模版，然而在真实的业务场景下还是有多页面模版的需求，百度和google上都能搜索到不少单页面模版改多页面模版的文章，但是没有现成的模版可以直接用，而且多页面模版页面多了之后，首次构建的速度真的很慢，无法忍受。这里我fork了官方的单页面webpack模版，并做了动态构建的优化。
一、如何使用
//默认全局安装vue-cli
vue init xyc-cn/webpack yourProject
cd yourProject
npm run dev
访问 http://localhost:8088/pages/module/index.html 会看到熟悉的官方带v-router的webpack模版页面
访问 http://localhost:8088/pages/module/detail.html 是我写的一个示例简单页面
二、多页面构建原理
多页面构建的原理并不复杂。大概流程是这样如下
- 指定一个命名规则的文件做为入口文件(例如v_entry.js)
- 遍历src目录，搜索文件入口(搜索全部的v_entry.js文件，生成一个webpack entry对象)
- 每个入口文件新建一个htmlPlugin生成html,并且把这个入口文件夹注入到html里面
三、页面数量膨胀后构建速度慢
随着业务的发展，项目会无限地膨胀，开发构建速度慢的问题会越来越严重，博主的项目有几十个页面，每个npm run dev都到等待几十秒时间。会让人很抓狂。理想的情况是，npm run dev的时候，只构建一个页面，每次访问到新页面的时候，再重新构建这个新页面的内容。这个时候express中间件webpack-dev-middleware派上用场了，通过它我们可以实现上述的理想构建方案。流程是这样的：
- 修改上面图片那个入口文件json，只取第一个key value。(这样首次构建就只会构建这个entry)
//first run only build one entry js buddle
let keyList = Object.keys(devConfig.entry), newEntry = {}
keyList.forEach(function (v, i) {
if (i === 0) {
newEntry[v] = [devConfig.entry[v], 'webpack-hot-middleware/client']
}
});
devConfig.entry = newEntry;
- 添加一个express中间件，每当有html请求过来，就判断下这个请求有没对应的entry，有就执行第三步，没有就返回错误。
- 调用webpack内置的entryPlugin插件，动态添加entry并且构建。2，3步骤的代码大概像这样
app.use(function (req, res, next) {
let reg = req.url.match(/pages\/(\w+)\/(\w+)\.html/);
if (reg) {
if (fs.existsSync(pathTo.join(process.cwd(), `./src/pages/${reg[1]}/${reg[2]}/v_entry.vue`))) {
if (!devConfig.entry[`pages/${reg[1]}/${reg[2]}/v_entry`]) {
devConfig.entry[`pages/${reg[1]}/${reg[2]}/v_entry`] = true;
//add new entry
complier.apply(new MultiEntryPlugin(process.cwd(),
[`./src/pages/${reg[1]}/${reg[2]}/v_entry`, 'webpack-hot-middleware/client'],
`pages/${reg[1]}/${reg[2]}/v_entry`));
//force build
webpackDevMiddlewareInstance.invalidate()
}
} else {
res.end('pages not found');
return;
}
}
next();
});
最后看下效果，初次构建，只构建了detail页面的js
项目github : github.com/xyc-cn/webp…