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

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

  •  
  •   leinov ·
    leinov · 2018-11-09 10:42:27 +08:00 · 3101 次点击
    这是一个创建于 1966 天前的主题,其中的信息可能已经有所发展或是发生改变。

    webpack-react-multi-page

    仓库

    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

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