![](https://img-blog.csdnimg.cn/20201014180756724.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Webpack5
文章平均质量分 64
有趣的小良
种一棵树最好的时间是十年前,其次是现在。
展开
-
Webpack5 htmlwebpackplugin用法
Webpack是一个功能强大的模块打包工具,而HtmlWebpackPlugin是Webpack的一个插件,用于生成HTML文件并自动注入打包后的资源。介绍了Webpack5中HtmlWebpackPlugin插件的用法及其各种配置选项。借助HtmlWebpackPlugin插件,我们可以方便地生成HTML文件并自动注入打包后的资源,同时还能对HTML进行压缩和定制化配置。原创 2023-10-13 15:50:41 · 1254 阅读 · 0 评论 -
Webpack5 处理图片资源
缺点:1.体积变得更大,Base64编码的数据体积通常是原数据的体积4/3,也就是datauri形式的图片会比二进制格式的图片体积大1/3。现在 Webpack5 已经将两个 Loader 功能内置到 Webpack 里了,我们只需要简单配置即可处理图片资源。优点:1.减少http请求数量,有时候图片的体积太小,占用一个HTTP会话不是很值得。的处理,样式资源打包到 main.js 里面去了,所以没有额外输出出来。此时如果查看 dist 目录的话,会发现多了三张图片资源。4.IE678兼容性较差。原创 2023-08-10 10:59:35 · 885 阅读 · 0 评论 -
Node.js的核心模块——path
Node.js的path模块是处理文件路径的必备工具,提供了规范化、拼接、解析和提取路径信息等功能。了解并熟练运用path模块的API,可以大幅提升文件路径处理的效率和准确性。无论是在构建Web应用、文件操作还是其他Node.js项目中,path模块都能为开发者节省不少时间和精力。path是Node.js的核心模块,专门用来处理文件路径,path模块为处理文件路径提供了一系列实用的功能和API。这里主要介绍一些path模块的常见api。原创 2023-08-10 10:01:47 · 827 阅读 · 0 评论 -
Webpack5 core-js和babel-loader区别和用法
通过使用babel-loader进行语法转换只能解决部分兼容性问题,而对于新增的API和全局对象,我们需要借助core-js来提供兼容性支持。核心思想是使用polyfill模拟缺失的功能,从而使JavaScript应用程序能够在各种浏览器中工作。通过合理配置Webpack和使用core-js,我们可以大大提升JavaScript应用程序的跨浏览器支持,为用户提供更好的体验。原创 2023-08-07 19:24:16 · 1031 阅读 · 0 评论 -
Webpack5 Preload/Prefetch技术
在现代Web开发中,页面加载速度对于用户体验至关重要。为了提高网页加载性能,Webpack 5推出了Preload和Prefetch这两个特性,可以帮助提前获取关键资源,从而加速页面加载速度。通过以上内容,读者将了解到Preload和Prefetch在Webpack 5中的作用、用法以及适用场景。他们可以根据实际需求,在项目中灵活应用这两个功能,从而提升网页加载性能。原创 2023-08-07 15:52:23 · 931 阅读 · 0 评论 -
Vue 路由懒加载
通过使用require、ES模块语法import以及不使用懒加载的方式,我们可以根据需求选择合适的路由懒加载技术。懒加载可以优化应用程序的性能,减少初始加载时间,并提供更好的用户体验。同时,对于较小或者不常访问的路由组件,可以考虑不使用懒加载的方式,以简化开发和维护。在Vue应用程序中,我们应根据项目需求选择适当的路由加载方式。原创 2023-08-07 08:58:45 · 727 阅读 · 0 评论 -
Webpack5 动态导入按需加载
传统上,在Webpack中,我们使用import语句可以在代码中静态地导入模块。这意味着所有的模块都会在构建时被打包到bundle中。然而,动态导入和按需加载允许开发者在运行时根据需要动态地加载模块,减少初始加载时间和资源消耗。减少初始加载时间:只加载当前需要的模块,而不是全部模块。优化代码分割:可将类似功能或依赖关系较弱的模块进行拆分,使得每个chunk更小且更独立。提高用户体验:按需加载可以使应用程序更快地响应用户交互,提升用户体验。原创 2023-08-04 15:01:07 · 2543 阅读 · 1 评论 -
Webpack5 cacheGroups
vue项目可以使用cacheGroups抽离一些公共模块,比如layouts(项目页面框架),elementUI或者其他ui组件库,vue,以及都会分离的libs(node_modules目录模块),这里我举例说明的是对 libs 的配置项。在Webpack 5中,cacheGroups是用于配置代码拆分的规则,它可以帮助你更细粒度地控制生成的代码块。通过合理配置cacheGroups,可以根据项目需求将代码拆分成不同的块,提高构建速度和应用的加载性能。原创 2023-08-03 20:14:09 · 1766 阅读 · 0 评论 -
Webpack5 生产模式压缩图片ImageMinimizerPlugin
之前在loader里面用asset(webpack5内置的文件资源模块)已经对图片等资源进行加工处理,把小于20kb的图片会被base64处理转换成dataUrl形式了,为什么还要用到ImageMinimizerPlugin再处理一次图片资源,这是不是多此一举?在没使用ImageMinimizerPlugin之前,我项目的图片格式打包完成之后是png格式,保持了未打包之前的格式,在使用了ImageMinimizerPlugin之后,变成了WebP格式的图片,所以我上网查了这两个格式的区别如下。原创 2023-07-31 15:29:16 · 1334 阅读 · 0 评论 -
Webpack5 多线程Threads
传统的单线程构建方式已经无法满足需求,因此Webpack5引入了多线程 Threads 技术,以并行处理构建任务,从而显著提高构建速度。Webpack5 多线程 Threads 技术是提升构建性能的重要利器,通过并行处理任务,能够显著缩短构建时间,提高开发效率。使用 Threads 的步骤相对简单,只需安装。在Webpack5中,Threads 指的是并行处理构建任务的线程,通过充分利用多核CPU的能力来提高构建速度。随着前端项目的不断演进,我们应积极探索并采用更多优化手段,以追求更高的性能和开发体验。原创 2023-07-31 10:22:47 · 1224 阅读 · 0 评论 -
Webpack5 对bundle分析
这个插件不是必须的,但在项目需要进行性能优化或者查找打包过程中出现的问题时,它非常有用。通过分析报告,开发者可以了解各个模块的体积情况,找出体积较大的模块,优化加载性能;你可以访问报告页面,查看模块大小、依赖关系等信息,并根据需要进行优化调整。bundle是Webpack打包的产物,通过分析bundle包的大小和模块关系等信息,我们可以更好地理解代码打包结果,并且继续优化 bundle 大小和性能。它可以生成一个报告,展示打包后各个模块的大小、依赖关系以及其他相关信息,帮助开发者优化代码和资源。原创 2023-07-26 14:04:21 · 773 阅读 · 0 评论 -
Webpack5 vue-loader和VueLoaderPlugin
它会读取 .vue 文件的内容,并根据配置对其中的模板、样式和脚本进行相应的转换和编译,最终生成可在浏览器运行的 JavaScript 模块。它的作用是将 .vue 文件中的模板、样式和脚本进行编译,并将其转换为 JavaScript 模块,以供Webpack打包使用。简单来说,VueLoaderPlugin 是一个插件,用于告诉 webpack 如何处理和解析 .vue 文件,而 vue-loader 则是实际执行加载和转换 .vue 文件的加载器。例如,你可以在组件的样式中这样用 SASS。原创 2023-07-25 20:13:52 · 1819 阅读 · 0 评论 -
Webpack5 CopyPlugin的作用
在Webpack 5中,CopyPlugin是一个插件,用于将文件或目录从源位置复制到构建目录中。它的作用是帮助开发人员在构建过程中将静态文件(如图片、字体等)直接复制到输出目录,而无需经过任何处理。CopyPlugin并不是必须的,它的使用与具体项目需求相关。如果你的项目需要复制一些静态资源到构建目录中,可以使用CopyPlugin来完成这个任务。总结:CopyPlugin的作用是复制文件或目录到构建目录中,根据项目需求而定,不是必须的插件。目录下的文件复制到输出目录的。目录下的文件复制到输出目录的。原创 2023-07-25 20:04:11 · 1080 阅读 · 0 评论 -
Webpack5 DefinePlugin的作用
在Webpack 5中,DefinePlugin是一个插件,用于创建全局常量,这些常量可以在编译过程中被引用。它的作用是允许开发人员在代码中定义全局变量,这些变量在构建过程中将被替换为其对应的值。总结:DefinePlugin的作用是创建全局常量,可以在代码中引用。它不是必须的插件,但在需要定义全局常量或环境变量时非常有用。DefinePlugin并不是必须的,但它是一个非常有用的插件,在某些情况下可以帮助我们优化代码或定义环境变量。这些常量在构建过程中会被替换为相应的值,并且在代码中可以直接使用。原创 2023-07-25 20:03:03 · 832 阅读 · 0 评论 -
Webpack5 生产模式source-map是必须的吗
会增加构建时间和打包后的文件大小。在生产模式下,你可能更关注性能和用户体验,因此可以选择关闭。在生产模式下不是必须的,但根据具体需求和项目特点,你可以根据以上因素进行判断和决策。调试能力:如果你需要在生产环境中进行调试,查找问题或者进行性能优化,开启。安全性考虑:在某些情况下,你可能不希望将源代码暴露给终端用户。可能会泄露你的源代码逻辑,因此需要权衡安全性和调试需求。取决于你的具体需求和项目情况。可以提供更好的源代码映射,方便你定位和排查问题。构建速度和输出文件大小:生成。原创 2023-07-25 20:00:55 · 268 阅读 · 0 评论 -
Webpack5 CleanWebpackPlugin
clean-webpack-plugin是webpack的一个小插件,由于每次打包的时候有可能文件名称和文件内容不一样,打包后的文件就叠加到输出目录下了。所以cleanWebPackPlugin作用就是在每次打包之前,先把输出目录删掉,创建最新的目录,避免一些不必要的文件还留在同一个目录下~原创 2023-07-12 10:23:32 · 1901 阅读 · 0 评论 -
Webpack5 SourceMap
当构建后代码出错了,会通过 xxx.map 文件,从构建后代码出错位置找到映射后源代码出错位置,从而让浏览器提示源代码文件出错位置,帮助我们更快的找到错误根源。开发时我们运行的代码是经过 Webpack 编译压缩合并之后的,这样的目的是以提高应用程序的性能,但是这种优化也给调试问题带来了困难,因为压缩后的代码难以追踪和调试。1,通过bundle和sourcemap文件,可以反编译出源码,也就是说,线上产物有sourcemap文件的话,就意味着有暴露源码的风险。会增加构建时间和打包后的文件大小。原创 2023-07-11 14:20:23 · 858 阅读 · 0 评论 -
Webpack5开发模式选择
Webpack 5 是一款强大的模块打包工具,可用于将许多分散的模块按照依赖关系打包成一个(或多个)bundle。在Webpack 5中,主要有两种开发模式,分别是开发模式(development)和生产模式(production)。开发模式(development):这种模式主要是为了提升开发过程中的体验,做了一些优化。生产模式(production):这种模式主要是为了优化打包后的代码,提升运行效率。记住,你可以通过在webpack的配置文件中设置。来选择使用哪种模式。原创 2023-07-10 20:42:28 · 661 阅读 · 0 评论