前言 我们在使用webpack时，经常会看到类似以下结构： build ├── webpack.common.js └── webpack.dev.js └── webpack.prod.js 很多时候，webpack的配置我们基本复制粘贴过来的，没有想...

Webpack相对其他打包器不同的地方 Webpack忽略具体资源类型之间的差异，将所有代码/非代码文件都统一看作Module——模块对象，以相同的加载、解析、依赖管理、优化、合并流程实现打包，并借助Lo...

一、前言 本来想将webpack的内容整理成一篇到底，但太长了容易引起视觉疲劳。所以单独将内容和实践内容分开。 在了解到理论内容之后，脑子总会出现这么一个问题。脑瓜子： 只看不写真的能让你学...

前言 本篇开始，一起讨论一下，基于Module Federation的微前端架构的架设方案。内容主要涉及到以下几个方面： 把单体应用，拆分为多个微应用，不可能一拆了之。微前端解决单体应用痛点的同时，...

1.webpack的概念及主要功能 概念： WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并...

这次来实现webpack，webpack的基本功能是从main.js出发，收集依赖，把所有js文件合并到bundle.js中。假设有main.js和foo.js两个文件： main.js： // 使用esm模块化，需要在package.json设置'typ...

大家好，我是苏先生，一名热爱钻研、乐于分享的前端工程师，跟大家分享一句我很喜欢的话：人活着，其实就是一种心态，你若觉得快乐，幸福便无处不在 github与好文 TypeScript知识点和99个类型体...

前言 webpack 我们每天都在用，但是Tree Shaking知道多少呢，今天就来唠一唠他都帮我们干了些什么？ 名词解释： Tree Shaking 是一种用于精确打包 JavaScript 应用程序的优化技术，它通过静态分...

前言 最近有一个朋友问我，他想在A项目里使用B项目的一个弹窗组件应该如何实现。当然最常见的就是将弹窗代码写成npm包的形式，项目A和B分别注入弹窗模块。那么还有其他方法，接下来就来探讨一下...

webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 webpack 处理应用程序时，它会在内部从一个或多个入口点构建一个依赖图，然后将你项目中所需的每一个模块组合成一个或多...

做一个有温度和有干货的技术分享作者 —— Qborfy 背景 最近在开发一个简单的个人记录网站，技术栈是使用 Vite + Vue3，由于使用的单台服务器，有时候服务器会被限制带宽，所以平时都会比较访问...

背景 最近，就前端开发过程中的痛点及可优化项做了一次收集。 其中，构建耗时、项目编译速度慢的字眼出现了好几次。 随着业务的快速发展，我们很多项目的体积也快速膨胀。随之而来的， 就是打包...

“ 打包 ”——一个前端研发无比熟悉的词语，打包工具从来都不是必要，后端（nodejs）几乎可以不使用，但在前端，又几乎不可以不用。 本文会带读者探究关于打包的一切，前辈们是从什么时候开始...

引言 在 Webpack 入门篇 里分享了 Webpack 的一些基本配置，掌握那些基本配置已经可以通过 Webpack 搭建项目了。但是对于学习，对于技术的追求，到这还远远不够呀，掌握了基础确实可以搭建项目...

大家好，我是苏先生，一名热爱钻研、乐于分享的前端工程师，跟大家分享一句我很喜欢的话：人活着，其实就是一种心态，你若觉得快乐，幸福便无处不在 github与好文 TypeScript知识点和99个类型体...

支持less 首先安装 next-with-less npm install next-with-less -D 然后编辑 next.config.js // next.config.js const withLess = require('next-with-less'); const path = require('node:path...