![](https://img-blog.csdnimg.cn/20190918140037908.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
Webpack
文章平均质量分 95
若年封尘
这个作者很懒,什么都没留下…
展开
-
详细介绍Webpack5中的Plugin
webpack在运行过程中会广播事件,插件只需要监听它所关心的事件,就能加入到这条生产线中,去改变生产线的运作。站在代码逻辑的角度就是:webpack在编译代码过程中,会触发一系列 Tapable钩子事件,插件所做的就是找到相应的钩子,往上面挂上自己的任务,也就是注册事件,这样当webpack构建的时候,插件注册的事件就会随着钩子的触发而执行了。开发插件,离不开这些钩子。插件Plugin可以扩展webpack,加入自定义的构建行为,使 webpack 可以执行更广泛的任务,拥有更强的构建能力。原创 2023-07-31 19:18:01 · 1079 阅读 · 4 评论 -
详细介绍Webpack5中的Loader
用来清理 js 代码中的console.log// 将console.log替换为空 return content . replace(/ console\.log\(.*\);?/ g , "");原创 2023-07-27 10:15:51 · 953 阅读 · 1 评论 -
万字长文详解Webpack5高级优化
使用 Source Map 让开发或上线时代码报错能有更加准确的错误提示。使用 HotModuleReplacement 让开发时只重新编译打包更新变化了的代码,不变的代码使用缓存,从而使更新速度更快。使用 OneOf 让资源文件一旦被某个 loader 处理了,就不会继续遍历了,打包速度更快。使用 Include/Exclude 排除或只检测某些文件,处理的文件更少,速度更快。使用 Cache 对 eslint 和 babel 处理的结果进行缓存,让第二次打包速度更快。原创 2023-07-26 09:45:36 · 1334 阅读 · 0 评论 -
详细总结Webpack5的配置和使用
webpack是一种前端静态资源打包工具。在webpack看来,前端的所有资源文件(js/json/css/img/less/…)都会作为模块处理。以一个或多个文件作为打包的入口,将我们整个项目所有文件编译组合成一个或多个文件输出出去。输出的文件就是编译好的文件,就可以在浏览器段运行了。它将根据模块的依赖关系进行静态分析,打包生成对应的静态资源(bundle)。原创 2023-07-23 00:46:46 · 2171 阅读 · 1 评论