webpack构建流程、基础配置、打包性能优化、热更新、和Vite区别
一、webpack构建流程 四个阶段： 初始化阶段 ：读取配置文件、创建complier实例 编译阶段 ：解析入口点、模块加载（loader） 打包阶段 ：模块合并与优化、代码分割 输出阶段 ：生成输出文件 1.配置文件解析： Webpack读取并解析webpack.config.js文件，获取构建所需的配置信息。 2.入口处理： Webpack从入口文件开始，构建模块依赖图。 3.模块加载与转换： 使用加载器处理不同类型的模块，如CS...
深入解析 Webpack 的构建流程
1\. 初始化阶段：准备启动引擎 当你启动 时，它就像一个超级工厂的启动按钮，开始准备好一切——加载配置文件、初始化插件，并准备好开始生产。 实例：准备你的工厂配置 解释： 入口文件（Entry） ：Webpack 从这里开始它的构建任务，像一个工厂的生产线入口。 输出路径（Output） ：Webpack 会把构建好的产品放在这里。 就是每个产品的唯一标识，确保浏览器不会缓存过时的文件。 模块加载（Loaders） ：当 Webpac...
为什么组件库打包用 Rollup 而不是 Webpack
Rolup 是一个打包工具，类似 Webpack。 组件库打包基本都是用 Rollup。 那 Webpack 和 Rollup 有什么区别呢？为什么组件库打包都用 Rollup 呢？ 我们来试一下： 我们创建两个模块： src/index.js src/utils.js 很简单的两个模块，我们分别用 rollup 和 webpack 来打包下： 安装 rollup： 创建 rollup.config.js 配置入口模块，打包产物的位置、...
一起学习 Webpack 模块热替换
何为 HMR? 模块热替换(HMR Hot Module Replacement)功能会在应用程序运行过程中替换、添加或删除模块，而无需重新加载整个页面 当我们对代码进行修改并保存后，webpack 将对代码重新打包，并将改动的模块发送到浏览器，浏览器通过新的模块替换老的模块，从而实现局部更新且不需要刷新页面 为何需要 HMR? 在 HMR 出现之后，程序的加载都是页面级别的，即使是单个文件的发生改变，都需要刷新整个页面才能够获得最新的...
浅谈 Webpack5 之模块联邦
Webpack 模块联邦是一种先进的代码共享技术，它允许在多个独立构建的 Web 应用程序之间共享代码，而无需将这些代码提前发布到 npm 仓库或其他中央存储。 这项技术特别适用于微前端架构，因为它能让各个前端团队独立开发、部署自己的应用，同时还能无缝共享组件、库或功能模块。 通俗点说就是在微前端架构中每个应用都是独立的，独立开发，独立部署，在开发过程中避免不了有些模块是重复使用的，如何把这些重复的模块利用起来，一般情况下会通过 npm...
Webpack 和 Rollup：您应该知道的一些事情
本文只做 Webpack 和 Rollup 的对比总结，不参入 esbuild、Vite 或其他工具的讨论 Webpack 和 Rollup 都是现在前端领域比较流行的打包工具，它们的相似之处在于可以帮助我们 把多个 JavaScript 文件打包成一个可以在浏览器中加载并在生产中使用的文件。 打包成单个文件的好处是可以减少网络请求、提高网站性能等目的。 这篇文章主要想通过对比的方式讲讲这两种打包工具的差异...
简述Webpack和Vite的区别
前言 和 是现代前端开发中非常重要的工具，有助于改善开发者的工作流程和提高生产力。这篇博客将对比 和 的区别，并探讨在什么样的项目中选择哪一个工具。 Webpack 是一个模块打包工具，使得工程中的各种资源能够被打包成一个整体的bundle.js文件。 具有很高的可配置性和灵活性，使得开发者可以使用各种插件和配置文件来优化它们的工作流程。 Webpack适用于大型、复杂的项目，它可以处理多种不同类型的文件（如js、css、图片等），并根...
css-loader和style-loader关系原理及作用
用webpack打包就需要用到css loader和style loader，接下来让我们逐步解析两个loader的作用以及它们都做了怎样的工作 创建空项目 创建一个名为demo的空文件夹，这就是我们实验的项目目录 进入到目录下执行 按照上述两步，我们就搭建好了最简单的项目环境了，接下来需要安装依赖包和创建源码目录 在项目目录创建 子目录 基于webpack4讲解，运行npm安装所需依赖 创建 创建一个 样式文件 创建 程序入口文件 运...