webpack5基本配置
面试真题:
- 前端代码为什么要进行构建和打包?(答全面)
- module chunk bundle分别是什么意思?有何区别?
- loader和plugin的区别?
- webpack如何实现懒加载?
- babel-runtime和 babel-polyfill?
- webpack常见的性能优化
1. webpack5 的小调整
2. webpack 基本配置
- 拆分配置和 merge
mode: 公共配置:webpack.common.js
开发环境:dev.js
生产环境:prod.js
- 启动本地服务
在dev环境下,安装webpack-dev-server
。
设置代理:
跨域请求,前端端口是8080
,跨域请求端口号3000
,这个时候就把本地8080/api/xxx
api代理到3000/api/xxx
,自己配置路径。常用的👇
3. 处理ES6
在.babelrc
里面写,
4. 处理样式
抽出来在common.js
中。webpack一切皆模块化,他不认识css文件,需要通过css-loader
把css文件变成js文件。再通过style-loader
插入到页面中。注意,loader的执行顺序是从后往前的。
👆升级:postcss.config.js: 加入plugins:autoprefixer
5. 处理图片
在dev里面:
file-loader
线上生产环境 prod: 小于 5KB 的图片用base64方式编码。打包完不放到根目录下,不然太乱,是放到img1目录下。
contenthash
哈希值:打包的内容变了,哈希值也变;内容不变,哈希值也不变。请求的时候就会命中缓存,请求就更快。 👈性能优化的小技巧之一(之前提到过)
webpack 高级配置
- 多入口(一个项目里面产出多个页面)
- entry:几个入口就写几个,下面是两个入口,写俩就好。
- name会根据entry里面名字生成
3.
chunks不写的话,上面两个部分的index.html和other.html会把两个文件同时都引入。
- 抽离CSS文件
本来是js引入css代码,然后把css代码塞到html标签里面去的,这样效率比较低。(开发环境没问题)
是style-loader
- 把common.js中的css处理给拆分了,dev环境沿用common的处理;prod环境在
plugin
里面加载,之后抽离出来,再压缩。
生产环境webpack.prod.js
:
MiniCssExtractPlugin
生产环境下大多数文件名都用了hash,访问速度会快一些。
这样一来体积被大大减小,注释啥的也没了。
mini-css-extract-plugin和css-minimizer-webpack-plugin的区别
- 抽离公共代码
体积很大的第三方模块(lodash)、import引入的文件(math.js)都抽离出去。不然每次打包的时候都要打包进去。
- 分组
splitChunks
minSize: 3KB
:意思是大于3KB的文件就单独打包,小于3KB的直接复制就好。
minChunks:1
,只要命中一次就把它单独拎出来打包。
minChunks:2
,命中两次或两次以上就单独打包。
- 懒加载
引入动态数据
上面几个比较常用👆 - 处理JSX
安装preset-react
- 处理Vue
安装vue-loader
分类:
Webpack面试知识点串讲
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 如何使用 Uni-app 实现视频聊天(源码,支持安卓、iOS)
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)