动态构建的多页面vue-cli模版

vue官方提供了几个vue cli的模版，但都单页面模版，然而在真实的业务场景下仍是有多页面模版的需求，百度和google上都能搜索到很多单页面模版改多页面模版的文章，可是没有现成的模版能够直接用，并且多页面模版页面多了以后，首次构建的速度真的很慢，没法忍受。这里我fork了官方的单页面webpack模版，并作了动态构建的优化。

1、如何使用

//默认全局安装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 是我写的一个示例简单页面

2、多页面构建原理

多页面构建的原理并不复杂。大概流程是这样以下

1. 指定一个命名规则的文件作为入口文件(例如v_entry.js)
2. 遍历src目录，搜索文件入口(搜索所有的v_entry.js文件，生成一个webpack entry对象)

   

3. 每一个入口文件新建一个htmlPlugin生成html,而且把这个入口文件夹注入到html里面

3、页面数量膨胀后构建速度慢

随着业务的发展，项目会无限地膨胀，开发构建速度慢的问题会愈来愈严重，博主的项目有几十个页面，每一个npm run dev都到等待几十秒时间。会让人很抓狂。理想的状况是，npm run dev的时候，只构建一个页面，每次访问到新页面的时候，再从新构建这个新页面的内容。这个时候express中间件webpack-dev-middleware派上用场了，经过它咱们能够实现上述的理想构建方案。流程是这样的：

1. 修改上面图片那个入口文件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;
复制代码

2. 添加一个express中间件，每当有html请求过来，就判断下这个请求有没对应的entry，有就执行第三步，没有就返回错误。
3. 调用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

访问了 http://localhost:8088/pages/module/index.html 会动态添加入口而且构建

项目github : github.com/xyc-cn/webp…

参考资料: Webpack实战 - 使用动态 entry 改善调试体验