01-webpack介绍-改造

本文介绍Webpack作为前端模块化打包工具的重要性和基本工作原理。详细解释了为何选择Webpack,包括处理依赖、合并代码等功能,以及如何配置Webpack来处理常见资源。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

Webpack

一 : Webpack 介绍

Webpack 是什么?? (面试)
  • 前端模块化打包(构建)工具
  • WebPack可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块、其它的一些浏览器不能直接运行的拓展语言(Scss,less等)以及新语法,并将其转换和打包为合适的格式供浏览器使用。
为什要使用WebPack?? (面试)
  • 浏览器不识别 SASS、Less ==> 需要对Less/SASS 预编译CSS => 供浏览器使用
  • 项目中的模块化以及互相之间引用依赖包造成文件分散 ==> 需要把各个分散的模块集中打包成大文件,减少HTTP的链接的请求次数
  • 打包成了大文件,体积就变大了 ==> 代码压缩
  • 部分ES6语法有兼容问题 => ES5 => 浏览器使用
  • 以上这些操作以前都是需要我们手动处理,这是非常繁琐的, 这个时候webpack就可以上场了,以上的这些操作,
  • 在webpack里,只要配置好,一下就可以都搞到了
Webpack的基本能力:处理依赖、模块化、打包
  • 处理依赖:方便引用第三方模块,让模块更容易复用、避免全局注入导致的冲突、、避免重复加载或者加载不必要的模块
  • 合并代码:把各个分散的模块集中打包成大文件,减少HTTP的链接的请求次数,优化代码的体积(压缩代码)
  • 各种插件:babel 把 ES6+ 转化为 ES5- 等
**webpack的工作原理 **(面试)
  • 简单的说就是分析代码,找到“require”、“import”、“define”等关键词,并替换成对应模块的引用。
  • 在一个配置文件中,指明对某些文件进行编译、压缩、组合等任务。把你的项目当成一个整体,通过一个给定的主文件 (index.js),webpack将从这个文件开始找到你的项目的所有的依赖文件,使用loaders处理他们,最后打包为一个浏览器可 以识别的js文件。

二 : Webpack 四个核心概念:

入口(entry)出口(output)加载器(loader)插件(plugins)

  • 入口 : 要打包哪个文件
  • 出口 : 要打包到哪里
  • 加载器 : 加载除了js文件其他文件的功能
  • 插件 : 处理加载器完成不了的功能, 使用插件

三 : 学习 手动配置 webpack 的目的

  • 为了我们后面使用脚手架做准备,
  • 能够完成webpack的基本安装
  • 能够了解webpack配置文件的作用
  • 能够说出webpack中loader 的作用
  • 能够使用webpack处理常见的资源(css/less/图片)
  • 能够说出webpack-dev-server的作用以及配置
  • 目标 : 能跟着 视频 + 笔记 照着敲完一遍即可
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

@陈皮糖

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值