node+webpack+react 多页面开发-终极架构

仓库

https://github.com/leinov/webpack-react-multi-page

特性

• 支持多页面同时热加载开发
• 自动识别新创建页面
• 每个页面生成个性化信息
• 分类打包
• 灵活扩展

安装&使用

// clone git clone [email protected]: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 

项目架构

技术使用

• react16
• webpack4
  • html-webpack-plugin 生成 html 文件
  • mini-css-extract-plugin css 分离打包
  • uglifyjs-webpack-plugin js 压缩
  • optimize-css-assets-webpack-plugin css 压缩
• es6
• babel
• node
  • opn 打开浏览器
  • compression 开启 gzip 压缩
  • express
  • fs
• git

目录结构

|-- 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 //生产启动程序 

完整 wiki