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/xxxapi代理到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 高级配置

  • 多入口(一个项目里面产出多个页面)
  1. entry:几个入口就写几个,下面是两个入口,写俩就好。
  2. name会根据entry里面名字生成

    3.
    chunks不写的话,上面两个部分的index.html和other.html会把两个文件同时都引入。
  • 抽离CSS文件
    本来是js引入css代码,然后把css代码塞到html标签里面去的,这样效率比较低。(开发环境没问题)

    是style-loader
  1. 把common.js中的css处理给拆分了,dev环境沿用common的处理;prod环境在plugin里面加载,之后抽离出来,再压缩
    生产环境 webpack.prod.js

    MiniCssExtractPlugin 生产环境下大多数文件名都用了hash,访问速度会快一些。

    这样一来体积被大大减小,注释啥的也没了。
    mini-css-extract-plugin和css-minimizer-webpack-plugin的区别
  • 抽离公共代码
    体积很大的第三方模块(lodash)、import引入的文件(math.js)都抽离出去。不然每次打包的时候都要打包进去。
  1. 分组 splitChunks

    minSize: 3KB:意思是大于3KB的文件就单独打包,小于3KB的直接复制就好。
    minChunks:1,只要命中一次就把它单独拎出来打包。
    minChunks:2,命中两次或两次以上就单独打包。
  • 懒加载
    引入动态数据

    上面几个比较常用👆
  • 处理JSX
    安装preset-react
  • 处理Vue
    安装vue-loader
posted @   一个甜橙子  阅读(185)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 如何使用 Uni-app 实现视频聊天(源码,支持安卓、iOS)
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
点击右上角即可分享
微信分享提示