现在普遍用的是webpack4,webpack5于2020年10月发布。
loader和plugin的不同
loader是加载器,用来打包css,less,sass,
plugin是插件
webpack如何做到热更新
代码更新页面也更新,就叫热更新,实时更新
如何用webpack优化前端性能
-
压缩代码:比如利用UglifyJsPlugin来对js文件压缩
-
CDN加速:将引用的静态资源修改为CDN上的路径。比如可以抽离出静态js,在index利用CDN引入;利用webpack对于output参数和各loader的publicPath参数来修改资源路径
-
删除Tree Shaking:将代码中永远不会走到的片段删除。可以通过在启动webpack时追加参数 --optimize-minimize 来实现
-
按照路由拆分代码,实现按需加载,提取公共代码
-
优化图片,对于小图可以使用base64的方式写入文件中