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

[leinov]

仓库

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

特性

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

安装&使用

// clone
git clone [e-mail]: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

[fullpowers]

前端戏真多,戏子也多

[leinov]

@fullpowers 少侠何出此言

[zongren]

为啥要多个界面同时加载，不卡吗。。。

[leinov]

@zongren 开发时是热加载 速度很快的 http://www.leinov.com/webpack-react-multi-page/ 你可以克隆下来试下

[buhi]

并不是想贬低楼主的工作, 但是这类脚手架随便一个前端学个一年都会自己弄出来一套, 所以我至今没见过一套能够足够流行的脚手架.
我觉得没有技术含量的东西, 要能够占领市场, 只有 1 条途径, 就是靠大厂推广.

[rabbbit]

我倒是想把 webpack 配置可视化,可惜写完了完全没人理
貌似这方面需求不多
https://aaron-bird.github.io/webpack-config-generator/

[leinov]

@buhi 我只是整理了一下自己的一个架构方案分享下而已，互联网时代不就是大家再互相学习与知识分享么，你可以否定我的架构，但不要否定我的工作 ok ？ 进你主页看了下 吠气很重呀，见谁怼谁 是老天对你不公 还是你对这个社会不满。

[leinov]

@rabbbit 很优秀呀 我研究下

[TomatoYuyuko]

@rabbbit 好东西啊 我觉得挺适合用来学习 wp 的

[buhi]

@leinov 我觉得楼主这个东西本身是不错的, 我只是对前端喜欢做脚手架的风气发下牢骚, 不是故意来惹毛楼主的

[connection]

多页应用其实也可以加入 dll 跟 common 利用缓存使用
这样细化的优势较大

[for8ever]

直接用 next.js 不就完了

[leinov]

@connection 好 我研究下

[leinov]

@for8ever 哈哈哈 优秀 这不是想自己折腾下嘛

[cuzfinal]

这和架构没关系吧，一个模板。

[Desiree]

好东西，支持一下，不过标题有点夸张就是了，「终极架构」

[leinov]

@cuzfinal 哈哈 我竟无言以对

[leinov]

@Desiree 谢谢 我感觉这版优化的比较自动化了就取了个夸张的标题

[Ixizi]

至今不会 webpack

[leinov]

@Ixizi 嘿嘿