webpack5

为什么要去学习webpack

开发时可能会使用框架(react、vue)、ES6、less/sass等css预处理器;

这样的代码想要在浏览器运行必须经过编译,成为浏览器可以识别的js、css等语法,才可以运行;

webpack用来处理以上编译,并且具备压缩代码、兼容性处理、提升代码性能;

以一个文件或者多个文件作为打包入口,将整个项目所有文件编译组合成一个或多个文件输出;输出的文件就是编译好的文件,可以在浏览器运行;
webpack输出的文件叫做bundle;

功能介绍

  • 开发模式:仅编译js的es module语法;
  • 生产模式:能编译js的es module语法,还可以压缩js代码
    但是webpack只能处理js语法,遇到css资源就无法处理了

核心功能

  • entry
  • output
  • loader
  • plugin
  • mode

css处理

动态创建一个style标签,里面是css代码

图片资源

file-loader、url-loader(已经内置,不需要再安装了)

base64:将图片转化为字符串(不需要额外发请求了)

ESLint

eslintrc.js(error、warn)

eslintignore

babel

babel.config.js

presets:[@babel/preset-env, @babel/preset-react, @babel/preset-typescript]

@babel/preset-env:处理箭头函数

在webpack.config.js文件中对js文件加上babel-loader;排除exclude: /node_modules/

处理html资源

htmlPlugin

搭建开发服务器

使用devServer(不会输出资源,是在内存中编译打包);自动搭建服务器,每次有代码修改,都自动重新打包

提取css成单独文件

MiniCssExtraPlugin.loader 替换掉style-loader

样式文件通过link引入,不再通过style标签引入

postcss-loader:处理样式兼容性(比如flex)

CssMinimizerPlugin:css插件压缩css文件

默认html、js都进行了压缩

相关推荐
OEC小胖胖6 小时前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
行云&流水7 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
老虎06277 小时前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html
三水气象台7 小时前
用户中心Vue3网页开发(1.0版)
javascript·css·vue.js·typescript·前端框架·html·anti-design-vue
烛阴7 小时前
Babel 完全上手指南:从零开始解锁现代 JavaScript 开发的超能力!
前端·javascript
CN-Dust8 小时前
[FMZ][JS]第一个回测程序--让时间轴跑起来
javascript
全宝9 小时前
🎨前端实现文字渐变的三种方式
前端·javascript·css
yanlele9 小时前
前端面试第 75 期 - 2025.07.06 更新前端面试问题总结(12道题)
前端·javascript·面试
妮妮喔妮10 小时前
【无标题】
开发语言·前端·javascript
fie888910 小时前
浅谈几种js设计模式
开发语言·javascript·设计模式