首页   注册   登录
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
华为云
V2EX  ›  程序员

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

  •  
  •   leinov · 12 天前 · 1018 次点击

    webpack-react-multi-page

    仓库

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

    特性

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

    安装&使用

    // clone
    git 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
    

    项目架构

    技术使用

    • 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

    21 回复  |  直到 2018-11-17 14:36:20 +08:00
        1
    fullpowers   11 天前
    前端戏真多,戏子也多
        2
    leinov   11 天前
    @fullpowers 少侠何出此言
        3
    zongren   11 天前
    为啥要多个界面同时加载,不卡吗。。。
        4
    leinov   11 天前
    @zongren 开发时是热加载 速度很快的 http://www.leinov.com/webpack-react-multi-page/ 你可以克隆下来试下
        5
    buhi   11 天前
    并不是想贬低楼主的工作, 但是这类脚手架随便一个前端学个一年都会自己弄出来一套, 所以我至今没见过一套能够足够流行的脚手架.
    我觉得没有技术含量的东西, 要能够占领市场, 只有 1 条途径, 就是靠大厂推广.
        6
    rabbbit   11 天前   ♥ 1
    我倒是想把 webpack 配置可视化,可惜写完了完全没人理
    貌似这方面需求不多
    https://aaron-bird.github.io/webpack-config-generator/
        7
    leinov   11 天前
    @buhi 我只是整理了一下自己的一个架构方案分享下而已,互联网时代不就是大家再互相学习与知识分享么,你可以否定我的架构,但不要否定我的工作 ok ? 进你主页看了下 吠气很重呀,见谁怼谁 是老天对你不公 还是你对这个社会不满。
        8
    leinov   11 天前
    @rabbbit 很优秀呀 我研究下
        9
    TomatoYuyuko   11 天前
    @rabbbit 好东西啊 我觉得挺适合用来学习 wp 的
        10
    buhi   11 天前
    @leinov 我觉得楼主这个东西本身是不错的, 我只是对前端喜欢做脚手架的风气发下牢骚, 不是故意来惹毛楼主的
        11
    connection   11 天前
    多页应用其实也可以加入 dll 跟 common 利用缓存使用
    这样细化的优势较大
        12
    for8ever   11 天前
    直接用 next.js 不就完了
        13
    leinov   11 天前
    @connection 好 我研究下
        14
    leinov   11 天前
    @for8ever 哈哈哈 优秀 这不是想自己折腾下嘛
        15
    cuzfinal   11 天前
    这和架构没关系吧,一个模板。
        16
    Desiree   11 天前
    好东西,支持一下,不过标题有点夸张就是了,「终极架构」
        17
    leinov   11 天前
    @cuzfinal 哈哈 我竟无言以对
        18
    leinov   11 天前
    @Desiree 谢谢 我感觉这版优化的比较自动化了就取了个夸张的标题
        19
    Ixizi   11 天前
    至今不会 webpack
        20
    leinov   10 天前
    @Ixizi 嘿嘿
        21
    yokyj   3 天前
    强烈安利 umijs
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   3744 人在线   最高记录 3821   ·  
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.1 · 18ms · UTC 02:43 · PVG 10:43 · LAX 18:43 · JFK 21:43
    ♥ Do have faith in what you're doing.
    沪ICP备16043287号-1