webpack在单页面打包上应用广泛,以create-react-app为首的脚手架众多,单页面打包通常指的是将业务js,css打包到同一个html文件中,整个项目只有一个html文件入口,但也有许多业务需要多个页面不同的入口,比如不同的h5活动,或者需要支持seo的官方网站,都需要多个不同的html。webpack-react-multi-page架构让你可以在多页面在项目开发中自动化打包新创建页面并保证每个页面都可以热更新 ,build打包后有清晰的文件层次结构。
概览
key
val
webpack多页面脚手架(自动)-原创
前端时间做一个项目,不依赖任何框架,如何去实现一个前完全完全分离的多页面脚手架呢?思前想后之后,选择了webpack,
用Nodejs的文件读写流,实现了全自动化文件目录编译
用ejs模板,解决了html中头部尾部的抽离
用webpack自带的加载器,支持的插件等,处理了样式,图片,html的输出等
脚手架运行命令
npm run dev
代码分析
entry.js 入口文件
//这个是入口文件的配置
let fs = require('fs');
l
webpack在单页面打包上应用广泛,以create-react-app为首的脚手架众多,单页面打包通常是将业务js,css打包到同一个html文件中,整个项目只有一个html文件入口,但也有许多业务需要多个页面不同的入口,比如不同的h5活动,或者需要支持seo的官方网站,都需要多个不同的html,webpack-react-multi-page架构让你可以实现多页面架构,在项目开发中保证每个页面都可以热更新并且打包后有清晰的文件层次结构。
Github地址
项目架构
技术使用
rea