Webpack共0篇
Webpack
排序
?深入浅出 Webpack5?
Webpack 找出模块之间的依赖关系，按照一定的规则把这些模块组织、合并为一个JavaScript（以下简写为JS）文件。 Webpack认为一切都是模块，如JS文件、CSS文件、jpg和png图片等都是模块。Webpack...
2年前webpack 之 Loader 浅析
我正在参加「掘金·启航计划」 1. 什么是loader 在Webpack中，Loader是用于将非JavaScript文件（如CSS、图片、字体等）转换为模块的函数。它们作为构建过程的一部分，用于处理项目中的不同类型...
2年前使用 Webpack 优化前端开发流程 | 青训营
在现代前端开发中，构建工具的选择和优化流程的设计至关重要。Webpack 是一个功能强大的前端构建工具，能够优化我们的开发流程，提高开发效率和项目性能。本文将介绍如何使用 Webpack 来优化前...
2年前Webpack5 中的 sourceMap
map 文件中的字段 version: map 文件的版本号 sources: 被映射的源文件路径 names: 被映射的源文件中的变量名 mappings: 映射关系，用来定位源文件中的代码位置 file: 生成的 map 文件名 source...
2年前
webpack不要硬学，带着这种目的跟思想学习，效率高太多了
前言 通过上篇文章——弄懂这几个概念后，我对webpack有了更新的理解 的讲解，我们大致了解了： 使用webpack过程中出现的一些概念 结合打包过程中出现的概念，浅析了webpack打包流程，让大家对...
2年前
这里有些方法，让你更好学会webpack“开发环境配置”
前言 我们在使用webpack时，经常会看到类似以下结构： build ├── webpack.common.js └── webpack.dev.js └── webpack.prod.js 很多时候，webpack的配置我们基本复制粘贴过来的，没有想...
2年前
中高级前端必须掌握的package.json最新最全指南
前言 package.json 是一个用于描述和配置项目的重要文件，其中包含了许多字段和选项，可以影响项目的构建、依赖管理、脚本执行等方面。了解这些字段可以帮助开发者更好地理解和控制项目的行为。...
2年前2023前端面试真题合集 – Webpack部分
知识点 基本概念：如入口（entry）、出口（output）、Loader、Plugin、模式（mode）等。 配置文件：理解Webpack配置文件（通常是webpack.config.js）的结构和常用配置项，如entry、output、modu...
2年前
首屏加载时间优化之在工作中实践
一、背景 作为一个唯唯诺诺的大三前端人终于出去实习了，在公司的第一个需求是针对公司的某个B端后台系统进行初次加载白屏时间优化的，那为什么要进行优化呢？ 1、白屏时间长影响体验效果 这个...
2年前Webpack完整打包流程分析
前言 webpack 在前端工程领域起到了中流砥柱的作用，理解它的内部实现机制会对你的工程建设提供很大的帮助（不论是定制功能还是优化打包）。 下面我们基于 webpack5 源码结构，对整个打包流程进...
2年前
记一次vue2多页应用打包优化
项目为 9 个入口的多页应用， @vue/cli-service版本为 4.4.4，webpack 版本为 4.46.0。部署的每一个应用加载都巨慢无比，抓包发现每个应用的首页都需要加载十几 M 的 js 文件。 优化前： 优化后...
2年前![webpack学习[一]：基本概念-五八三](https://583.cn/wp-content/uploads/2023/07/46ad4e434fab20dd78916990d063ae96.jpg)
webpack学习[一]：基本概念
webpack 是一个用于现代 JavaScript 应用程序的 静态模块打包工具。当 webpack 处理应用程序时，它会在内部从一个或多个入口点构建一个依赖图，然后将你项目中所需的每一个模块组合成一个或多...
2年前
markdown文件如何在前端框架中肆意运行（一）
我正在参加「掘金·启航计划」 第三方库通常有对应文档，尤其组件库文档会附带组件效果以及 demo 代码，对使用者十分友好；查看库源码发现使用 md 文件编写，今天通过解析 element-ui 组件库来...
2年前一文参透 webpack-bundle-analyzer 插件
webpack-bundle-analyzer 是一个用于分析 webpack 打包结果的插件。它提供了一个可视化的报告，帮助开发人员更好地理解和优化构建产物的大小和依赖关系。 项目背景： 在现代前端开发中，随着项...
2年前
Webpack通识
Webpack相对其他打包器不同的地方 Webpack忽略具体资源类型之间的差异，将所有代码/非代码文件都统一看作Module——模块对象，以相同的加载、解析、依赖管理、优化、合并流程实现打包，并借助Lo...
2年前webpack15个常用loader的使用
前言 Webpack 是一个功能强大的现代 JavaScript 应用程序的模块打包工具。它能够将多个模块打包成一个或多个静态资源文件，以供浏览器加载。在 Webpack 中，Loader 扮演着至关重要的角色，用于...
2年前【温故知新】从常用配置项深入浅出 webpack
我正在参加「掘金·启航计划」 序 从最基础配置开始, 逐步理解 webpack 是如何工作的 可以直接用作 webpack 配置项的参考，按需在项目中添加 加深前端开发对工程化项目的认知 基础配置 要安装最...
2年前Webpack5模块联邦微前端方案实践
1.参考资料 1.Module Federation官方文档 2.Module Federation入门 3.Webpack 5：Module Federation 2.Webpack5模块联邦 使用的webpack版本：5.76.2，webpack-cli版本：5.0.1，webapck-dev-serv...
2年前
webpack原理解析（三）plugin机制
背景 在之前的文章中，我们了解到了webpack的打包机制和loader，loader 用于转换某些类型的模块，而plugin则可以用于执行范围更广的任务。包括：打包优化，资源管理，注入环境变量。插件目的在...
2年前webpack 如何在运行时传递参数
1. 问题场景 假设这样的问题场景：站点支持国际化（i18n），编译时想支持指定语言来编译。 一般，项目中会配置 npm scripts 来跑一些任务，常规的线下开发编译任务，线上发版打包任务。 所以 pa...
2年前