程序员经验分享-hwhale

Webpack构建多页应用Mpa(一)：阐述设计概要

2023-11-20

应用场景

如果现在要做一个前后端分离的项目，可能第一反应就是使用市面上很火的三大MVVM框架（Vue、React、Angular）。
但如果团队没有专职前端，并且项目预留时间也很紧张，没足够时间去系统学习工程化Vue项目，但是却也想让html、css、js这些代码被打包压缩，尽可能减少文件大小；

针对这种场景，有没有办法可以快速构建一套前端页面体系，只要求掌握div+css+jq+ajax这些简单技术，就能快速去开发？
答案是：可以，使用webpack构建

webpack构建多页面应用优点：

  • 生成更少的文件
  • 生成更小的文件
  • 工程化项目，高效管理
  • 渐进式开发（只要会div+css+jq+ajax就能开发）
  • 丰富的loader和插件（打包、压缩混淆、图片转base64、热更新…）

目标

希望最终能产出一套切实可用的Mpa整体方案，相比传统前端多页面项目，提升开发效率、减少文件产出。

这里演示做一个简单的个人博客，会有这些个页面：博客首页、博文详情页、搜索页、分类、tag标签页、月归档页，下面是项目文件结构：
在这里插入图片描述
每个页面都包含同样的index.html、index.js、index.css，分别放html代码、js逻辑和css样式。
除了每个页面特性化代码，还可以考虑把公共html、js、css代码封装，方便复用。

最终打包后的文件结构：
在这里插入图片描述

持续更新中…

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

WEBPACK

Webpack构建多页应用Mpa(一)：阐述设计概要 的相关文章

  • Webpack 和外部库

    我正在尝试 webpack http webpack github io http webpack github io 看起来真的很不错 但我有点被困在这里了 假设我正在为库 f ex jQuery 使用 CDN 然后在我的代码中 我想要r

  • Vue Cli 3 禁用代码分割 - 无法删除哈希文件

    我有一个vue config js设置效果很好 并取消了默认的代码分割 但它仍然输出一个 CSS 文件 其哈希值与具有好名称的 CSS 文件相同 我可以编写一个脚本来删除它 但我想知道是否有一种方法可以将文件设置为不输出带有哈希的CSS文件

  • webpack - require('node_modules/leaflet/leaflet.css')

    所以我正在尝试使用构建一个地图应用程序webpack and leaflet 我可以要求leaflet js从我的map js文件 但我无法在不出现错误的情况下调用 leaflet css 我现在的webpack config js好像 u

  • 如何从捆绑 .spec.js 文件中排除 webpack

    我的 Package bundle 读取 var reqContext require context true js reqContext keys map reqContext 其中基本上包括所有 js 文件 我希望表达式排除任何 sp

  • Karma 与 Webpack 和 Typescript 不执行任何测试

    我试图弄清楚如何将 Karma 测试运行器与 Webpack 和 Typescript 源文件一起使用 以此源文件作为唯一的测试文件为例 测试规格 var message string yay alert message describe

  • Webpack 不包括 ProvidePlugins

    我正在开发一个小型试用 Web 应用程序 它使用 vue webpack 模板 https github com vuejs templates webpack https github com vuejs templates webpac

  • Webpack 5 和 ESM

    我想我已经阅读了 SO 上的每个线程以及互联网上的每个相关页面 所有内容都有一些问题的变体 I want 使用 webpack 捆绑我的 Web 应用程序 在我的源 js 中使用 ES 模块并将它们转译为更广泛的浏览器支持 在我的 webp

  • 覆盖 vuetify 中的 scss 变量

    为了增加 vuetify 的 v switch 的宽度 我想修改 vuetify 的 scss 变量的值 vuetify是通过vue cli配置的 开发的代码如下 src assets css overrides scss font siz

  • 我可以打包 Webpack 但不缩小调试范围吗？

    似乎是一个真正愚蠢的问题 必须在某个地方有答案 但我已经搜索了几个小时但没有结果 我是 ReactJS 和使用 Webpack 构建的新手 一般来说是构建配置 我正在使用 Webpack 链接和捆绑我的整个项目 包括 ReactJS 它工作

  • CSS 模块：如何禁用文件的本地范围？

    我在一个新的 React 项目中使用 CSS 模块 通过 Webpack css 加载器 尽管它工作得很好 但我在获取 SCSS 时遇到了困难反应选择 https github com JedWatson react select上班 我想

  • 什么是 Tree Shaking？为什么需要它？

    我已经开始学习 Angular 2 并且遇到了 tree shake 这个术语 但我无法从初学者的角度找到任何好的解释 我在这里有两个问题 什么是 Tree Shaking 为什么需要它 我该如何使用它 我看到你在这里有三个问题 1 什么是

  • Webpack 5 - 资产模块 - 缺少 url-loader 功能 - postTransformPublicPath

    我想按照建议切换到 webpack 5 asset 模块 不幸的是我错过了 webpack url loader 的函数 postTransformPublicPath path any gt any 由于我们应用程序的结构 资产的公共区域

  • 没有找到任务运行程序配置？

    我有 新安装的 Visual Studio Professional 2017 V 15 9 4 视觉工作室解决方案 https learn microsoft com en us visualstudio ide solutions an

  • 使用 typescript 时 html-webpack-plugin 出现太多错误

    我正在使用 Webpack 和 typescript 启动一个项目 但是当我尝试运行开发服务器时 我在 html webpack plugin 上遇到很多错误 这是我的输出 gt email protected cdn cgi l emai

  • Sentry 与 @sentry/webpack-plugin 和 heroku

    我正在使用 webpack 来构建我的应用程序 它可以在本地使用 sentry webpack plugin 它自动生成版本并将源映射上传到 Sentry 但是 如果我尝试在 Heroku 上构建相同的应用程序 则会出现以下错误 Error

  • 如何避免在 webpack 生产构建中重复模块“bn.js”？

    我的应用程序使用了 webpack 4 不知何故 bn js包在生产构建中占用了大量资源 从图中可以看出 它占用了594 22KB 数据 有没有办法让1个文件bn js对于所有依赖于的包bn js 发生这种情况可能是因为您的依赖项都需要不同

  • NuxtJS & SASS Loader - 在生产环境中使用 sass-loader (SCSS) 进行构建

    我添加了此行以在开发 本地 服务器上使用 sass loader 进行构建 nuxt config js module exports mode spa build analyze analyzerMode static generateS

  • Webpack将js/css文件内容直接注入到index.html

    我有这样的代码

  • WebPack 源映射令人困惑（重复文件）

    我决定在我今天正在启动的一个新项目上尝试 WebPack 并且我从源映射中得到了非常奇怪的行为 我在文档中找不到任何相关信息 在浏览 StackOverflow 时也找不到其他人遇到此问题 我目前正在查看由以下公司制作的 HelloWorl

  • Webpack 和 Angular HTML 图像加载

    我一直对 webpack 和 Angular 感到头疼 这可能有一个简单的答案 但我无法弄清楚 我已经阅读了堆栈溢出中关于这个主题的几乎所有答案 但都无济于事 我有一个像这样的 html 页面 还有其他包含图像的模板 img

随机推荐

  • SpringMVC加载流程

    这节介绍SpringMVC SpringMVC是一种基于Java的实现MVC设计模式的请求驱动类型的轻量级Web框架 本章会介绍相关概念 流程 再从源码进行讲解 1 MVC MVC Model View Controller 是一种软件设计

  • Zookeeper(三)—分布式锁实现

    一 独占锁原理 独占锁是利用zk同一目录下不能创建多个相同名称的节点这个特性 来实现分布式锁的功能 竞争锁的分布式系统 都在zk根目录下创建一个名为lock的节点 创建节点成功的系统 说明抢到了这把锁 没有创建成功的系统 说明这个节点已经被

  • 星星之火-22: 什么是手机小区重选？跳槽

    小区重选 cell reselection 指手机在空闲模式下 通过监测邻区和当前小区的信号质量以选择一个最好的小区提供服务信号的过程 选择了一家新公司 并不意味着永久待在一家公司 当前服务的公司 有可能由于经营状况变变糟 薪资水平下降 也

  • 【树莓派4B】darknet-nnpack的安装及使用

    文章目录 前言 步骤 1 下载依赖项 2 安装NNPACK darknet 3 下载darknet nnpack 4 使用YOLO进行预测 检测图像 检测视频 检测视频流 错误处理 make 时报错 undefined reference

  • （二）webpack-server

    宗旨 为了更好的开发和调试 1 package json npm init y 生成package json 2 安装server npm install webpack dev server D 3 修改配置 在package json文

  • canvas绘制一个圆分成六等分颜色随机

  • 基于FPGA的AHT10传感器温湿度读取

    文章目录 一 系统框架 二 i2c接口 三 i2c控制模块 状态机设计 状态转移图 START INIT CHECK INIT IDLE TRIGGER WAIT READ 代码 四 数据处理模块 串口 代码 五 仿真 testbench设

  • vue：实现锚点双向滚动/文章章节联动滚动效果

    文章目录 需求描述 实现思路 示例代码 参考网址 需求描述 需要实现类似doc中文档大纲的效果 点击对应章节的名称时定位到相应的正文 而当正文滚动时 高亮显示对应的章节名称 实现思路 其实笔者一开始想到的是利用a标签页内跳转 也就是 锚点

  • pandas学习笔记--增加行或列

    一 增加行 1 loc 想增加一行 行名称为 5 内容为 16 17 18 19 df loc 5 16 17 18 19 后面的序列是Iterable就行 2 at df at 5 16 17 18 19 3 set value df s

  • CTFShow web1-7——CTF秀WEB模块解题思路

    CTFShow WEB模块详细通关教程 受篇幅所限 通关教程分为上下两部分 第一部分为1 7关 第二部分为8 14关 本篇博客为1 7关的通关教程 从解题思路和原理剖析两个方面进行讲解 CTFShow web1 7关详细教程 解题思路 CT

  • 架构师必备技能之——MySQL数据库表设计

    好记忆不如烂笔头 能记下点东西 就记下点 有时间拿出来看看 也会发觉不一样的感受 目录 一 总体设计思想 二 字段相关设计原则 三 索引设计原则 四 SQL操作原则 五 其他原则 一 总体设计思想 1 不要在数据库做运算符操作 数据库服务器

  • FastJSON、Jackson、Gson性能测试

    起因是公司原先用的是阿里开源的FastJSON 大家用的也比较顺手 但是在出现了两次严重的漏洞后 公司决定放弃FastJSON 使用其他序列化 反序列化工具 考虑大家常用的无非就是FastJSON Jackson和Gson这三种 因此领导让

  • MyBatis 中如何使用多表查询

    MyBatis 中如何使用多表查询 MyBatis 是一款优秀的 ORM 框架 支持多表查询操作 在实际开发中 经常需要使用多表查询来获取业务数据 本文将介绍 MyBatis 中如何使用多表查询 包括使用嵌套查询 使用关联查询和使用动态 S

  • 六种进程间通信方式

    转载 六种进程间通信方式 LceChan的博客 CSDN博客 如何实现进程间通信

  • swiper 轮播 多行多列 横向排列

    一直没仔细研究过swiper 用到了swiper多行多列的展示效果 官网默认是纵向排列 想要做到横向排列 需添加一个一个属性 slidesPerColumnFill row slidesPerView 4 slidesPerColumn 4

  • SpringBoot 统一功能处理

    目录 一 统一用户登录权限验证 Spring 拦截器 统一访问前缀添加 二 统一异常处理 三 统一数据格式返回 String 格式的特殊处理 一 统一用户登录权限验证 在没有统一功能处理之前 对于用户登录权限验证 每个方法都需要单独写用户登

  • 编写函数void fun(int x,int *pp,int *n)，它的功能是：求出x的偶数因子，并按从小到大的顺序放在pp所指的数组中，这些因子的个数通过形参n返回（假设pp指向足够大的空间）。

    编写函数void fun int x int pp int n 它的功能是 求出x的偶数因子 并按从小到大的顺序放在pp所指的数组中 这些因子的个数通过形参n返回 假设pp指向足够大的空间 如 当x的值为24 则有6个符合要求分别是2 4

  • QT编译环境配置，以及开发板移植的问题

    一 QT编译环境的设置 编译环境的配置 这个是真个系统构建的时候配置的问题 比较麻烦 后面在补这部分的知识 韦东山的开发板和乌班图的编译工具链里面是具有qt的编译工具链的 自己看的是正点原子的视频 所以按照正点正点原子的编译工具进行配置的

  • Linux下进程退出的几种形式

    进程退出 Linux 下进程的退出分为正常退出和异常退出两种 1 正常退出 a 在main 函数中执行return b 调用exit 函数 c 调用 exit 函数 2 异常退出 a 调用about函数 b 进程收到某个信号 而该信号使程序

  • Webpack构建多页应用Mpa(一)：阐述设计概要

    应用场景 如果现在要做一个前后端分离的项目 可能第一反应就是使用市面上很火的三大MVVM框架 Vue React Angular 但如果团队没有专职前端 并且项目预留时间也很紧张 没足够时间去系统学习工程化Vue项目 但是却也想让html

热门标签