项目目录结构

./configwebpack配置文件├──webpack.base.js--公共配置├──webpack.config.build.js--生产环境特有配置├──webpack.config.dev.js--开发环境特有配置├──webpack.config.js--引用的配置文件│./public公共静态资源├──css│└──print.css打印时用的样式│./src核心代码├──assets静态资源css/img├──constants常量│├──index.js存放导航的名称映射信息│├──schema存放每个简历模板的默认JSON数据,与pages中的模板一一对应│└──────demo1.js├──pages简历模板目录│└──demo1--其中的一个模板│├──utils工具方法├──app.js项目的入口js├──index.html项目的入口页面

约定优于配置

根据约定好的目录结构，通过自动化的脚本

所有模板都统一在src/pages/xxx目录下

页面模板约定为index.html,该目录下的所有js文件将被自动添加到webpack的entry中，自动注入到当前页面模板中

例如

./src├──pages│└──xxx│└─────index.html│└─────index.scss│└─────index.js

此处自动化生成entry/page配置代码可移步至这里查看

自动生成的结果如下

每个HTMLWebpackPlugin的内容格式如下

自动生成导航栏

首页顶部有一个导航栏用于切换简历模板的路由

这部分的链接内容如果手动填写是很无趣的，如何实现自动生成的呢？

首先首页模板的headernav部分内容为

htmlWebpackPlugin.options表示HTMLWebpackPlugin对象的的userOptions属性

咱们上面拿到了了所有Page的title，将所有title使用,连接拼接在一起，然后绑定到userOptions.pageNames上，则页面初次渲染结果就变成了

abc,demo1,vue1,react1,introduce

有了初次渲染结果，接下来咱们写一个方法把这些内容转为a标签即可

constnavTitle={'demo1':'模板1','react1':'模板2','vue1':'模板3','introduce':'使用文档','abc':'开发示例'}functioncreateLink(text,href,newTab=false){consta=document.createElement('a')a.href=hrefa.text=texta.target=newTab?'_blank':'page'returna}/***初始化导航栏*/functioninitNav(defaultPage='react1'){const$nav=document.querySelector('headernav')//获取所有模板的链接---处理原始内容constlinks=$nav.innerText.split(',').map(pageName=>{constlink=createLink(navTitle[pageName]