![](https://img-blog.csdnimg.cn/20201014180756780.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
webpack
文章平均质量分 67
尤雨东
了解真相,你才能获得真正的自由!
展开
-
webpack5.x性能优化之 代码分包 配置文件分离 多入口 SplitChunks cacheGroups runtimeChunk dynamic import(动态导入) 懒加载 魔法注释
webpack优化文章目录webpack优化代码分离认识代码分离多入口起点Entry Dependencies(入口依赖)SplitChunkschunks其他的splitChunks属性(很少手动配置)minSize和maxSizeminChunkscacheGroups默认缓存组缓存组优先级maxAsyncRequestsnamechunkIdsoptimization. runtimeChunk动态导入(dynamic import)动态导入的文件命名代码懒加载魔法注释魔法注释:prefetch预获原创 2022-03-31 14:29:00 · 6500 阅读 · 1 评论 -
webpack5.x 各种开发常见配置大汇总 loader plugin devServer proxy babel 懒加载
webpack学习之旅文章目录webpack学习之旅webpack基础打包认识webpack脚手架依赖webpackwebpack是什么Vue项目加载的文件有哪些webpack使用前提webpack的安装webpack的打包方式1. 默认打包2. 创建局部的webpack3. Webpack配置文件4. 指定配置文件5. Webpack的依赖图webpack打包其他文件1. css-loader的使用css-loader的使用方案内联方式CLI方式loader配置方式(重点)2. style-loader原创 2022-03-29 22:29:42 · 1616 阅读 · 0 评论 -
webpack结合babel使用core-js和regenerator-runtime进行polyfill的时候报错踩坑
core-js版本问题默认polyfill的时候,使用的是core-js的2版本,这是默认值,这时候可能报错。如下:此时,只需要在预设的babel配置文件中,指定core-js的版本为3.x即可。module.exports = { presets: [ [ "@babel/preset-env", { useBuiltIns: "usage", // 指定 corejs的版本 默认不指定的情况下使用的是2版本 co原创 2022-03-25 18:11:16 · 1533 阅读 · 0 评论 -
webpack5的新特性 模块资源asset 打包图片资源的坑
webpack在webpack5出来了资源模块以后,可以替代以前的 file-loader,url-loader,raw-loader等。当我们在使用file-loader等处理图片等资源的时候,导入资源时:如果采用的是cmd规范,也就是require(‘资源’)的时候,发现是需要取出default属性的值,才是真正的资源内容。(es module没有这问题)。而使用webpack5的资源模块新特性处理图片等资源的时候,如果采用cmd规范,导入的文件资源是不需要获取default的内容,直接requi原创 2022-03-22 17:37:13 · 1476 阅读 · 0 评论