Webpack教程-概述

什么是Webpack

Webpack是一个静态资源打包工具 。它以一个或多个文件作为打包入口,将整个项目所有的文件编译组合成一个或多个文件进行输出。(输出的文件即编译好的文件,就可以在浏览器上运行)

Webpack官网

核心概念

entry (入口)

entirywebpack 应该使用哪个模块,来作为项目构建的起点。打包时,webpack会根据入口文件找出项目中模块和库的(直接或间接)依赖。

output (输出)

outputwebpack打包完的文件输出路径,及文件命名。

loader (加载器)

loaderwebpack 打包时用于转换或处理某些类型的模块。(webpack 本身只能处理jsjson等资源。)

plugin (插件)

plugin指扩展webpack 的功能。如打包优化资源管理注入环境变量等。

mode (模式)

modewebpack 打包时使用哪些模式进行内置优化。(webpack 主要有三种模式:developmentproductionnone)

主要功能

模块打包

将项目中的所有模块(jscss图片字体)当作一个整体,通过依赖关系将它们打包成一个或多个静态资源文件。

依赖管理

Webpack可以分析模块之间的依赖关系,根据配置的入口文件找出所有依赖的模块,并将其整合到打包结果中。

文件转换

Webpack 本身只处理jsjson 模块,但可通过loader(加载器),将其他类型的文件转换为有效的模块,使其能够被打包到最终的结果中。

代码拆分

Webpack支持将代码拆分成多个模块,实现按需加载和提升应用性能。

插件系统

Webpack 提供了丰富的插件系统,可通过插件实现各种功能的扩展。如压缩代码、自动生成HTML文件等。

注意:

  1. Webpack支持所有符合ES5标准 的浏览器(不支持IE8及以下版本)。Webpack中的import() require.ensure()需要Promise 。若要支持旧版本浏览器,需在使用此表达式之前,加载polyfill
  2. Webpack5需运行在Nodejs 10.13.0+
相关推荐
Moment10 小时前
Vibe Coding 时代,到底该选什么样的工具来提升效率❓❓❓
前端·后端·github
IT_陈寒11 小时前
SpringBoot性能飙升200%?这5个隐藏配置你必须知道!
前端·人工智能·后端
小时前端12 小时前
React性能优化的完整方法论,附赠大厂面试通关技巧
前端·react.js
Nicko12 小时前
Jetpack Compose BOM 2026.02.01 解读与升级指南
前端
小蜜蜂dry12 小时前
nestjs学习 - 控制器、提供者、模块
前端·node.js·nestjs
优秀稳妥的JiaJi12 小时前
基于腾讯地图实现电子围栏绘制与校验
前端·vue.js·前端框架
前端开发呀13 小时前
从 qiankun(乾坤) 迁移到 Module Federation(模块联邦),对MF只能说相见恨晚!
前端
没想好d13 小时前
通用管理后台组件库-10-表单组件
前端
恋猫de小郭13 小时前
你用的 Claude 可能是虚假 Claude ,论文数据告诉你,Shadow API 中的欺骗性模型声明
前端·人工智能·ai编程
_Eleven14 小时前
Pinia vs Vuex 深度解析与完整实战指南
前端·javascript·vue.js