![](https://img-blog.csdnimg.cn/20201014180756724.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Webpack5
文章平均质量分 68
Webpack构建工具5.0
天界程序员
笔落惊风雨,诗成泣鬼神。
展开
-
第二十一章 webpack5原理loader概述
loader其实是一个函数,用来帮助webpack将不同类型的文件转换为webpack可识别的模块。原创 2022-12-25 00:30:00 · 220 阅读 · 0 评论 -
第二十章 webpack5项目搭建Vue-Cli(配置优化)
优化组件库的按需加载、主题颜色修改等原创 2022-12-24 00:30:00 · 508 阅读 · 0 评论 -
第十九章 webpack5项目搭建Vue-Cli(合并配置)
对于开发环境的配置和生产环境的配置,有大部分代码配置是重复的,因此我们希望将配置合并减少代码体积。对于Vue-Cli的合并配置,我们使用进行改造。原创 2022-12-23 00:30:00 · 954 阅读 · 0 评论 -
第十八章 webpack5项目搭建Vue-Cli(生产环境)
我们这里的webpack.prod.js采用复用react-cli的开发模式的配置进行改造。原创 2022-12-22 00:30:00 · 171 阅读 · 0 评论 -
第十七章 webpack5项目搭建Vue-Cli(开发模式)
我们这里的webpack.dev.js采用复用react-cli的开发模式的配置进行改造。4、使用vue-style-loader替换style-loader。2、注册VueLoaderPlugin插件。创建一个目录用来搭建vue-cli的项目。3、添加vue文件的loader配置。这里我们在封装的函数里面替换即可。新增vue文件的扩展名。初始化项目,生成一个。原创 2022-12-21 00:30:00 · 711 阅读 · 0 评论 -
第十六章 webpack5项目搭建React-Cli(配置优化)
配置优化,修改组件库主题颜色,关闭性能分析提高打包速度原创 2022-12-20 00:30:00 · 169 阅读 · 0 评论 -
第十五章 webpack5项目搭建React-Cli(配置合并)
对于开发环境的配置和生产环境的配置,有大部分代码配置是重复的,因此我们希望将配置合并减少代码体积。原创 2022-12-19 02:57:02 · 377 阅读 · 0 评论 -
第十四章 webpack5项目搭建React-Cli(生产模式)
生产模式我们就是在开发环境下面进行改造。原创 2022-12-19 03:00:00 · 398 阅读 · 0 评论 -
第十三章 webpack5项目搭建React-Cli(开发模式)
创建一个新的目录,用于搭建React项目。初始化项目生成文件。新建config目录文件夹,在创建开发配置文件,并定义好初始配置结构。原创 2022-12-18 00:15:00 · 622 阅读 · 0 评论 -
第十二章 webpack5高级优化——代码运行性能
但是这样的话就会有一个问题, 因为前后输出的文件名是一样的,都叫 main.js,一旦将来发布新版本,因为文件名没有变化导致浏览器会直接读取缓存,不会加载新资源,项目也就没法更新了。当我们修改 math.js 文件再重新打包的时候,因为 contenthash 原因,math.js 文件 hash 值发生了变化(这是正常的)。所以一旦修改了任何一个文件,整个项目的文件缓存都将失效。runtime 文件只保存文件的 hash 值和它们与文件关系,整个文件体积就比较小,所以变化重新请求的代价也小。原创 2022-12-17 01:00:00 · 136 阅读 · 0 评论 -
第十一章 webpack5高级优化——减少代码体积
减少代码体积可用使得我们的项目在浏览器加载的时间更快,用户体验也更好。开发时我们定义了一些工具函数库,或者引用第三方工具函数库或组件库。如果没有特殊处理的话我们打包时会引入整个库,但是实际上可能我们可能只用上极小部分的功能。这样将整个库都打包进来,体积就太大了。案例说明:文件名:这里有两个函数一个是计算数的平方,一个是计算数的立方,它们都使用语句导出了。当我们只需要使用平方的这个函数的时候,我们使用语法将它单独引入即可:文件名:这个时候的生产模式是默认开启功能的,我们只需要执行打包命令即可观察dist原创 2022-12-16 00:30:00 · 361 阅读 · 0 评论 -
第十章 webpack5高级优化——提升打包速度
由于随着项目体积的变大,我们的打包速度也随之变慢,为了改善这一现象我需要对做一些优化。开发时我们修改了其中一个模块代码, 默认会将所有模块全部重新打包编译,速度很慢。所以我们需要做到修改某个模块代码,就只有这个模块代码需要重新打包编译,其他模块不变,这样打包速度就能很快。(/热模块替换):在程序运行中,替换、添加或删除模块,而无需重新加载整个页面。文件名:样式文件:可以使用功能:因为内部实现了~文件:默认不能使用功能 ===> 需要修改代码,添加支持功能的代码上面这样写会很麻烦,所以实际开发我们会使用原创 2022-12-15 00:15:00 · 814 阅读 · 0 评论 -
第九章 webpack5高级优化——提升开发体验
之前我们所配置的webpack打包出来的文件在浏览器里面进行调试,是非常困难的。查看打包出来的js文件:如果报错在浏览器控制台是这样的:点进去查看源代码是这样的:该源代码是经过webpack降级编译后的代码,我们无法查看我们自己写的初始代码,对于复杂的逻辑出现错误,我们是无法进行快速调试的。将来所有 css 和 js 合并成了一个文件,并且多了其他代码。此时如果代码运行出错那么提示代码错误位置我们是看不懂的。一旦将来开发代码文件很多,那么很难去发现错误出现在哪里。所以我们需要更加准确的错误提示,来帮助我们原创 2022-12-14 00:30:00 · 317 阅读 · 0 评论 -
第八章 webpack5优化处理CSS
我们之前处理css资源只是简单的配置了一些loader,让webpack将其打包进bundle里面,但是这样对于项目加载以及用户体验不是很友好。CSS 文件目前被打包到 js 文件中,当 js 文件加载时,会创建一个 style 标签来生成样式这样对于网站来说,会出现闪屏现象,用户体验不好我们应该是单独的 Css 文件,通过 link 标签加载性能才好在webpack中配置插件文件名:运行webpack打包观察dist目录变化情况,是否将css文件分离出来了。因为浏览器厂商众多,采用的浏览原创 2022-12-13 00:30:00 · 329 阅读 · 0 评论 -
第七章 webpack5 开发模式与生产模式
开发模式顾名思义就是我们开发代码时使用的模式。这个模式下我们主要做两件事:开发时我们有样式资源、字体图标、图片资源、html 资源等,webpack 默认都不能处理这些资源,所以我们要加载配置来编译这些资源提前检查代码的一些隐患,让代码运行时能更加健壮。提前检查代码规范和格式,统一团队编码风格,让代码更优雅美观。我们之前其实一直处于开发模式。生产模式是开发完成代码后,我们需要得到代码将来部署上线。这个模式下我们主要对代码进行优化,让其运行性能更好。优化主要从两个角度出发:我们分别准备两个配置文件来放不同的配原创 2022-12-12 00:45:00 · 155 阅读 · 0 评论 -
第六章 webpack5开发服务器与自动化
每次写完代码都需要手动输入指令才能编译代码,太麻烦了,我们希望一切自动化开启服务器配置文件名:运行服务器并且当你使用开发服务器时,所有代码都会在内存中编译打包,并不会输出到 dist 目录下。开发时我们只关心代码能运行,有效果即可,至于代码被编译成什么样子,我们并不需要知道。如果你想你的js打包输出在一个指定的目录可以在output对象里面进行配置:文件名:如果你想你的图片资源也输出在一个指定目录可以这样配置:文件名:运行webpack你可以看到对应文件的输出目录。打印而不是删除原创 2022-12-11 00:45:00 · 403 阅读 · 0 评论 -
第五章 webpack5处理其他资源
开发过程中可能还会处理什么字体、图标、音频等资源,这里我们记录一下。这里的HTML其实只要处理一个就行了,需要使用插件功能来自动引入打包后的资源到中,如:在 body 中使用 标签引入你所有 webpack 生成的 bundle。在webpack配置中启用插件文件名:这个的文件路径可以自定义,不过作为公共模板文件,我们一般放在目录下面。此时 dist 目录就会输出一个文件可以看见该文件自动引入了webpack打包后的js文件。如果在 webpack 的输出中有任何 CSS 资源(例如,使用原创 2022-12-10 00:45:00 · 454 阅读 · 0 评论 -
第四章 webpack5处理js资源
在webpack5的官方文档中已经说明,webpack是会自动处理JavaScript和JSON资源的,这里为什么还要我们单独处理呢? 原因是 Webpack 对 js 处理是有限的,只能编译 js 中 ES 模块化语法,不能编译其他语法,导致 js 不能在 IE 等浏览器运行,所以我们希望做一些兼容性处理。其次开发中,团队对代码格式是有严格要求的,我们不能由肉眼去检测代码格式,需要使用专业的工具来检测。我们先完成 Eslint,检测代码格式无误后,在由 Babel 做代码兼容性处理。详情可参见:ES原创 2022-12-09 00:30:00 · 351 阅读 · 0 评论 -
第三章 webpack5处理图片资源
在过去中处理图片采用的loader是和, 可能还有进行处理图片。示例配置:当图片小于 时,会直接把图片的数据流,即 格式,写入到 标签或中现在 已经将和两个 功能内置到 里了,我们只需要简单配置即可处理图片资源示例配置:资源模块类型(asset module type),通过添加 4 种新的模块类型,来替换所有这些 loader: 当在 中使用旧的 assets loader(如 // 等)和 asset 模块时,你可能想停止当前 asset 模块的处理,并再次启动处理,这可能会导致 ass原创 2022-12-08 00:30:00 · 689 阅读 · 0 评论 -
第二章 webpack处理样式资源
webpack 只能理解 JavaScript 和 JSON 文件,Webpack 本身是不能识别样式资源的,所以我们需要借助 Loader 来帮助 Webpack 解析样式资源。样式资源文件:Css、Less、Sass、Scss、Styl我们找 Loader 都应该去官方文档中找到对应的 Loader,然后使用官方文档找不到的话,可以从社区 Github 中搜索查询。Webpack5-loader1、需要的loader2、下载包到项目3、配置loader注意:use 数组里面 Loader 执行顺序是原创 2022-12-07 00:30:00 · 231 阅读 · 0 评论 -
第一章 WebPack5 的基本介绍
webpack是一个用于现代JavaScript应用程序的静态模块打包工具。当webpack处理应用程序时,它会在内部从一个或多个入口点构建一个,然后将你项目中所需的每一个模块组合成一个或多个bundles,它们均为静态资源,用于展示你的内容。开发时,我们会使用,Less/Sass 等 css 预处理器等语法进行开发。这样的代码要想在浏览器运行必须经过编译成浏览器能识别的 JavaScript、CSS 等语法,才能运行。除此之外,打包工具还能压缩代码、做兼容性处理、提升代码性能等。原创 2022-12-06 00:15:00 · 287 阅读 · 0 评论