当前位置: 首页 > article >正文

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+

http://www.kler.cn/news/324313.html

相关文章:

  • CF补题第二天
  • 【C++篇】迈入新世界的大门——初识C++(上篇)
  • element下拉框联动 或 多选 回显数据后页面操作不生效问题解决
  • 汇编语言 访问CMOS RAM并打印时间(未完)
  • 6-演员和蓝图
  • 计算机毕业设计 基于Python的热门微博数据可视化分析系统的设计与实现 Python+Django+Vue 可视化大屏 附源码 讲解 文档
  • MySQL—触发器详解
  • vector的模拟实现以及oj题(2)
  • Linux —— Socket编程(二)
  • NetworkPolicy访问控制
  • Windows 开发工具使用技巧
  • PAT甲级1003Emergency
  • 【分布式微服务云原生】10分钟揭秘Dubbo负载均衡:如何让服务调用更智能?
  • 发明专利实用新型专利外观设计专利
  • List几种遍历方法速度
  • 【GUI设计】基于图像分割的GUI系统(3),matlab实现
  • leetcode91. 解码方法,动态规划
  • uniapp设置从右上角到左下角的三种渐变颜色
  • 滚雪球学MySQL[2.1讲]:基础SQL操作
  • 如何使用 Go 获取你的 IP 地址
  • MMD模型及动作一键完美导入UE5-IVP5U插件方案(二)
  • Vue3中的30个高频重点面试题
  • 金镐开源组织成立,增加最新KIT技术,望能为开源添一把火
  • 加法器以及标志位
  • Qt学习笔记
  • HTTP请求过程 part-1
  • 高通Android 12 音量API设置相关代码
  • (undone) MIT6.824 Lecture1 笔记
  • OpenGL ES 绘制一个三角形(2)
  • zookeeper 服务搭建(集群)