webpack
文章平均质量分 52
此分类内容为尚硅谷课程学习内容
新茶十九
且将新火试新茶,诗酒趁年华
展开
-
webpack5高级--04_ 优化代码运行性能
Code Split。原创 2024-03-13 08:20:58 · 748 阅读 · 0 评论 -
webpack5高级--03_减少代码体积
如果没有特殊处理的话我们打包时会引入整个库,但是实际上可能我们可能只用上极小部分的功能。开发如果项目中引用了较多图片,那么图片体积会比较大,将来请求速度比较慢。开发时我们定义了一些工具函数库,或者引用第三方工具函数库或组件库。你可以将这些辅助代码作为一个独立模块,来避免重复引入。为编译的每个文件都插入了辅助代码,使代码体积过大!对一些公共方法使用了非常小的辅助代码,比如。默认情况下会被添加到每一个需要它的文件中。我们可以对图片进行压缩,减少图片体积。并且使所有辅助代码从这里引用。中的没有使用上的代码。原创 2024-03-12 08:21:36 · 429 阅读 · 0 评论 -
webpack5高级--02_提升打包构建速度
所以我们需要做到修改某个模块代码,就只有这个模块代码需要重新打包编译,其他模块不变,这样打包速度就能很快。我们目前打包的内容都很少,所以因为启动进程开销原因,使用多进程打包实际上会显著的让我们打包时间变得很长。当项目越来越庞大时,打包速度越来越慢,甚至于需要一个下午才能打包出来代码。多进程打包:开启电脑的多个进程同时干一件事,速度更快。默认会将所有模块全部重新打包编译,速度很慢。编译结果,这样第二次打包时速度就会更快了。文件,这样速度就比之前的单进程打包更快了。的打包速度,因为其他文件都比较少。原创 2024-03-12 08:20:56 · 1067 阅读 · 0 评论 -
webpack5高级--01_提升开发体验
开发时我们运行的代码是经过webpack所有css和js合并成了一个文件,并且多了其他代码。此时如果代码运行出错那么提示代码错误位置我们是看不懂的。一旦将来开发代码文件很多,那么很难去发现错误出现在哪里。所以我们需要更加准确的错误提示,来帮助我们更好的开发代码。原创 2024-03-11 08:36:42 · 586 阅读 · 0 评论 -
webpack5基础--14_优化css
Css文件目前被打包到js文件中,当js文件加载时,会创建一个style标签来生成样式这样对于网站来说,会出现闪屏现象,用户体验不好我们应该是单独的Css文件,通过link标签加载性能才好。原创 2024-03-11 08:35:36 · 365 阅读 · 0 评论 -
webpack5基础--13_生产模式介绍
生产模式是开发完成代码后,我们需要得到代码将来部署上线。这个模式下我们主要对代码进行优化,让其运行性能更好。原创 2024-03-09 14:58:22 · 375 阅读 · 0 评论 -
webpack5基础--12_开发服务器&自动化
每次写完代码都需要手动输入指令才能编译代码,太麻烦了,我们希望一切自动化。原创 2024-03-09 14:57:21 · 322 阅读 · 0 评论 -
webpack5基础--11_处理 Html 资源
【代码】webpack5基础--11_处理 Html 资源。原创 2024-03-08 08:19:40 · 371 阅读 · 0 评论 -
webpack5基础--10_处理 js 资源
有人可能会问,js资源Webpack不能已经处理了吗,为什么我们还要处理呢?原因是Webpack对js处理是有限的,只能编译js中ES模块化语法,不能编译其他语法,导致js不能在IE等浏览器运行,所以我们希望做一些兼容性处理。其次开发中,团队对代码格式是有严格要求的,我们不能由肉眼去检测代码格式,需要使用专业的工具来检测。jsBabelEslint我们先完成Eslint,检测代码格式无误后,在由Babel做代码兼容性处理Eslint可组装的JavaScript和JSX检查工具。原创 2024-03-08 08:19:06 · 1034 阅读 · 0 评论 -
webpack5基础--09_处理其他资源
开发中可能还存在一些其他资源,如音视频等,我们也一起处理了。原创 2024-03-07 08:48:57 · 215 阅读 · 0 评论 -
webpack5基础--08_处理字体图标资源
打开选择想要的图标添加到购物车,统一下载到本地。原创 2024-03-06 09:14:01 · 675 阅读 · 0 评论 -
webpack5基础--07_自动清空上次打包资源
观察 dist 目录资源情况。原创 2024-03-06 09:12:56 · 384 阅读 · 0 评论 -
webpack5基础--06_修改输出资源的名称和路径
(注意:需要将上次打包生成的文件清空,再重新打包才有效果)原创 2024-03-05 08:25:28 · 447 阅读 · 0 评论 -
webpack5基础--05_处理图片资源
过去在Webpack4时,我们处理图片资源通过和url-loader进行处理现在Webpack5已经将两个Loader功能内置到Webpack里了,我们只需要简单配置即可处理图片资源。原创 2024-03-05 08:24:35 · 700 阅读 · 0 评论 -
webpack5基础--04_处理样式资源
Webpack本身是不能识别样式资源的,所以我们需要借助Loader来帮助Webpack解析样式资源我们找Loader都应该去官方文档中找到对应的Loader,然后使用官方文档找不到的话,可以从社区Github中搜索查询Webpack 官方 Loader 文档css-loader:负责将 Css 文件编译成 Webpack 能识别的模块:会动态创建一个 Style 标签,里面放置 Webpack 中 Css 模块内容此时样式就会以 Style 标签的形式在页面上生效。原创 2024-03-04 08:25:23 · 870 阅读 · 0 评论 -
webpack5基础--03_开发模式介绍
开发时我们有样式资源、字体图标、图片资源、html 资源等,webpack 默认都不能处理这些资源,所以我们要加载配置来编译这些资源。提前检查代码规范和格式,统一团队编码风格,让代码更优雅美观。提前检查代码的一些隐患,让代码运行时能更加健壮。开发模式顾名思义就是我们开发代码时使用的模式。原创 2024-03-04 08:24:26 · 304 阅读 · 0 评论 -
webpack5基础--02_基本配置( 5 大核心概念)
在开始使用Webpack之前,我们需要对Webpack的配置有一定的认识。原创 2024-02-29 08:10:09 · 428 阅读 · 0 评论 -
webpack5基础--01_基本使用
Webpack开发模式:仅能编译JS中的ES Module语法生产模式:能编译JS中的ES Module语法,还能压缩 JS 代码。原创 2024-02-28 08:18:14 · 509 阅读 · 0 评论