浅谈webpack+react多页面开发终极架构

webpack在单页面打包上应用广泛，以create-react-app为首的脚手架众多，单页面打包通常指的是将业务js，css打包到同一个html文件中，整个项目只有一个html文件入口,但也有许多业务需要多个页面不同的入口，比如不同的h5活动，或者需要支持seo的官方网站，都需要多个不同的html。webpack-react-multi-page架构让你可以在多页面在项目开发中自动化打包新创建页面并保证每个页面都可以热更新 ，build打包后有清晰的文件层次结构。

概览

特性

安装&使用

// clonegit clone git@github.com:leinov/webpack-react-multi-page.git// 安装依赖包npm install// 开发npm run dev// 编译打包npm run build// 启动生产页面npm start

新创建页面在src下添加文件夹并创建pageinfo.json 然后npm run dev 即可

|-- src  |-- index/  |-- page2/    |-- index.js    |-- pageinfo.json

项目架构

技术使用

目录结构

|-- webpack-react-multi-pages //项目  |-- dist //编译生产目录    |-- index      |-- index.css      |-- index.js    |-- about      |-- about.css      |-- about.js    |-- images    |-- index.html    |-- about.html  |-- node_modules //node包  |-- src //开发目录    |-- index //index页面打包入口      |-- images/      |-- js        |-- app.js// 业务js      |-- index.sass      |-- index.js //页面js入口    |-- about //about页面打包入口      |-- images/        |--js          |-- app.js// 业务js      |-- about.sass      |-- about.js //页面js入口    |-- template.html // html模板    |-- style.sass //公共sass  |-- webpackConfig //在webpack中使用    |-- getEntry.js //获取入口    |-- getFilepath.js //src下需要打包页面文件夹    |-- htmlconfig.js //每个页面html注入数据  |-- package.json  |-- .gitignore  |-- webpack.config.js //webpack配置文件  |-- www.js //生产启动程序