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

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+

相关文章:

  • 趣笔阁爬虫实验
  • 华为eNSP使用详解
  • vue-cli,element-plus,axios,proxy
  • docker-图形化工具-portainer的使用
  • NXP i.MX8系列平台开发讲解 - 4.2.2 摄像头篇(二) - 摄像头DVP接口
  • PG逻辑订阅功能
  • 【Mysql多数据源实现读写分离的几种方案】
  • 【网站架构部署与优化】Tomcat部署安装
  • android设计模式的建造者模式,请举例
  • Tesla T4 P2P测试
  • Apache Iceberg 与 Spark整合-使用教程(Iceberg 官方文档解析)
  • 重头开始嵌入式第四十二天(硬件 ARM体系架构)
  • 计算机网络(八) —— Udp协议
  • powershell@update-help更新文档和离线文档安装@并行加速安装帮助文档更新@安装报错问题
  • 【LeetCode:219. 存在重复元素 II + 哈希表】
  • 【JavaScript】通过闭包创建具有私有属性的实例对象
  • 2017年终总结、随想
  • Apache Spark Streaming 使用实例
  • Hexo+码云+git快速搭建免费的静态Blog
  • JavaScript的使用你知道几种?(上)
  • java第三方包学习之lombok
  • JS数组方法汇总
  • miniui datagrid 的客户端分页解决方案 - CS结合
  • Octave 入门
  • Perseus-BERT——业内性能极致优化的BERT训练方案
  • python 装饰器(一)
  • React系列之 Redux 架构模式
  • 关键词挖掘技术哪家强(一)基于node.js技术开发一个关键字查询工具
  • 基于web的全景—— Pannellum小试
  • 开放才能进步!Angular和Wijmo一起走过的日子
  • 聊聊redis的数据结构的应用
  • 驱动程序原理
  • 如何使用 JavaScript 解析 URL
  • 微信公众号开发小记——5.python微信红包
  • 我感觉这是史上最牛的防sql注入方法类
  • 物联网链路协议
  • 在electron中实现跨域请求,无需更改服务器端设置
  • 自动记录MySQL慢查询快照脚本
  • 通过调用文摘列表API获取文摘
  • ​io --- 处理流的核心工具​
  • ​TypeScript都不会用,也敢说会前端?
  • #微信小程序:微信小程序常见的配置传旨
  • $.extend({},旧的,新的);合并对象,后面的覆盖前面的
  • (Oracle)SQL优化技巧(一):分页查询
  • (zhuan) 一些RL的文献(及笔记)
  • (不用互三)AI绘画:科技赋能艺术的崭新时代
  • (附源码)springboot金融新闻信息服务系统 毕业设计651450
  • (附源码)计算机毕业设计ssm基于B_S的汽车售后服务管理系统
  • (三)Kafka离线安装 - ZooKeeper开机自启
  • (数据大屏)(Hadoop)基于SSM框架的学院校友管理系统的设计与实现+文档
  • (小白学Java)Java简介和基本配置
  • (原創) 是否该学PetShop将Model和BLL分开? (.NET) (N-Tier) (PetShop) (OO)
  • (转)Java socket中关闭IO流后,发生什么事?(以关闭输出流为例) .
  • .net core 6 集成和使用 mongodb
  • .NET Core MongoDB数据仓储和工作单元模式封装