Webpack共0篇
Webpack
排序
Vite + Qiankun + Module Federation，微前端项目升级?
起源 原有vue-cli + qiankun微前端项目，分为一个主应用，10多个子应用。由于历史原因存在vue2、vue3多个版本，并通过vue-cli构建，由于qiankun的沙箱隔离，每个子应用存在重复的依赖构建。所以...
2年前webpack3升级到webpack5
参考地址：webpack.docschina.org 依赖调整 包名处理方式版本webpack升级5.51.0webpack-cli新增4.10.0webpack-dev-server升级4.7.4webpack-merge升级5.8.0babel-loader升级8.2.5autoprefixer升...
2年前
首屏加载时间优化之在工作中实践
一、背景 作为一个唯唯诺诺的大三前端人终于出去实习了，在公司的第一个需求是针对公司的某个B端后台系统进行初次加载白屏时间优化的，那为什么要进行优化呢？ 1、白屏时间长影响体验效果 这个...
2年前
webpack开发自定义功能loader
webpack loader 开发 概述 使用webpack来开发一些自定义的loader，可以让我们更加深刻的认识和了解webpack的工作机制是怎么样的。 每一个loader都是一个函数，该函数在loader转换资源的时候调用...
2年前
从零开始打造基于Module Federation的微前端架构(一)——Monorepo架构与远程模块集成
前言 本篇开始，一起讨论一下，基于Module Federation的微前端架构的架设方案。内容主要涉及到以下几个方面： 把单体应用，拆分为多个微应用，不可能一拆了之。微前端解决单体应用痛点的同时，...
2年前
从零搭建React脚手架（Webpack5+Typescript+Eslint）
前言 React是当前最流行的前端开发框架之一，React可以使前端开发更加便利，有着组件化，虚拟dom，高性能，单向数据流，生态系统丰富等优势。因此应运而生的react脚手架也有很多，一些官方推荐...
2年前
webpack模块联邦
前言 最近有一个朋友问我，他想在A项目里使用B项目的一个弹窗组件应该如何实现。当然最常见的就是将弹窗代码写成npm包的形式，项目A和B分别注入弹窗模块。那么还有其他方法，接下来就来探讨一下...
2年前
webpack5实用配置经验总结
场景一：使用ESM形式和Typescript编写webpack配置文件 参照官网的配置Typescript，有三种解决方案，目前采用的是使用tsconfig.json中重载ts-node的配置，存在一种问题：在package.json中声明了t...
2年前
跟着Vue2官文实现一个SSR（SSR新手起步）
前言 Vue.js 服务器端渲染指南 | Vue SSR 指南 (vuejs.org) Demo地址：github.com/vuejs/vue-h… Demo是尤大做得一个博客项目，里面有了官文中大部分提及的Vue SSR必要的一些代码。官文中的代码...
2年前使用 Webpack 优化前端开发流程 | 青训营
在现代前端开发中，构建工具的选择和优化流程的设计至关重要。Webpack 是一个功能强大的前端构建工具，能够优化我们的开发流程，提高开发效率和项目性能。本文将介绍如何使用 Webpack 来优化前...
2年前Webpack完整打包流程分析
前言 webpack 在前端工程领域起到了中流砥柱的作用，理解它的内部实现机制会对你的工程建设提供很大的帮助（不论是定制功能还是优化打包）。 下面我们基于 webpack5 源码结构，对整个打包流程进...
2年前
【前端工程化】webpack5+vue3+ts+代码规范构建企业级前端项目(一)
目录 前言 初始化项目 webpack基础配置 webpack开发环境配置 webpack打包环境配置 参考 一. 前言 本文是专栏【前端工程化】webpack5+vue3+ts+代码规范构建企业级前端项目系列第一篇，会详细讲解...
2年前
第 4 章 webpack 性能优化
对于开发环境而言，我们主要优化打包构建速度和优化代码调试。 开发环境性能优化 对于生产环境而言，我们主要优化打包构建速度和优化代码运行的性能。 生产环境性能优化 HMR HMR（Hot Module Re...
2年前从零开始配置Vue开发环境，Webpack新手贴
vue 官方为了让开发者快速进行开发，提供了vue-cli脚手架，只需简单几步，就能开始vue的开发了。 然而，对项目里的webpack封装和配置了解的不清楚，就容易导致出问题不知如何解决，甚至不会通过...
2年前
markdown文件如何在前端框架中肆意运行（一）
我正在参加「掘金·启航计划」 第三方库通常有对应文档，尤其组件库文档会附带组件效果以及 demo 代码，对使用者十分友好；查看库源码发现使用 md 文件编写，今天通过解析 element-ui 组件库来...
2年前【跳槽必备】2023webpack常问面试知识点总结
前序 Webpack是一个现代的JavaScript应用程序静态模块打包工具。它能够处理各种类型的模块（如JavaScript、CSS、图片等），将它们打包成最终的静态资源文件。Webpack的作用是优化项目结构、处理...
2年前
在 qiankun 中 document.head.appendChild 方法影响到 webpack 代码分割的问题
此问题并非 qiankun 的 bug 背景 在我们公司的前端项目中，在主应用的根组件 App 中有这样一段代码 简化版代码 import React, { useEffect, useRef } from 'react' const rawAppendChild = HTML...
2年前
【Webpack5 实践篇】Webpack 5 TypeScript React 开发实践案例配置
一、前言 本来想将webpack的内容整理成一篇到底，但太长了容易引起视觉疲劳。所以单独将内容和实践内容分开。 在了解到理论内容之后，脑子总会出现这么一个问题。脑瓜子： 只看不写真的能让你学...
2年前
模块联邦实践
在聊模块联邦之前，我们先了解下在多个项目下，前端模块如何复用的 跨项目模块复用方案 1、npm 包 包管理工具对于前端应用来说不可或缺，我们可以将模块上传到 npm 包，在需要的项目中引入，以...
2年前
记一次webpack转vite踩坑之路
背景 公司的h5项目越来越大，打包进度展示2万+模块, 尽管从webpack2升级到webpack4，冷启动仍需三分多钟，热更新10s左右，占用电脑内存也大，开发体验较差；查阅了很多资料，决定在运行项目时使...
2年前