Webpack
文章平均质量分 63
小秀_heo
一个学习前端开发的大学生
展开
-
vite 和 rollup
这是你的项目的入口点(即主要的 JavaScript 文件)。Rollup 会从这个文件开始分析你的代码,并尝试找出它依赖的其他模块。,本身就可以当做脚手架使用。webpack只是提供了打包,vue-cli脚手架内也只是提供了一套模板,内部集成webpack,供开发使用。Rollup 是一个 JavaScript 模块打包器,它可以将多个模块打包成一个单独的文件。本身已经集成了大部分的配置,比如各种预处理语言,ts,各种资源。不会生成过多的运行代码。可以多模块化规范打包。原创 2024-04-08 18:43:18 · 610 阅读 · 0 评论 -
【Webpack】Webpack 优化
【代码】【Webpack】Webpack 优化。原创 2024-02-24 23:53:21 · 612 阅读 · 0 评论 -
【Webapck】优化代码运行性能
打包代码时会将所有 js 文件打包到一个文件中,体积太大了。我们如果只要渲染首页,就应该只加载首页的 js 文件,其他文件不应该加载。所以我们需要将打包生成的文件进行代码分割,生成多个 js 文件,渲染哪个页面就只加载某个 js 文件,这样加载的资源就少,速度就更快。代码分割实现方式有不同的方式,为了更加方便体现它们之间的差异,我们会分别创建新的文件来演示。原创 2024-02-24 23:52:51 · 1139 阅读 · 0 评论 -
【Webpack】减少代码体积
开发时我们定义了一些工具函数库,或者引用第三方工具函数库或组件库。如果没有特殊处理的话我们打包时会引入整个库,但是实际上可能我们可能只用上极小部分的功能。这样将整个库都打包进来,体积就太大了。是一个术语,通常用于描述移除 JavaScript 中的没有使用上的代码。ES ModuleWebpack 已经默认开启了这个功能,无需其他配置。原创 2024-02-24 23:52:13 · 321 阅读 · 0 评论 -
【Webpack】提升打包构建速度
开发时我们修改了其中一个模块代码,Webpack 默认会将所有模块全部重新打包编译,速度很慢。所以我们需要做到修改某个模块代码,就只有这个模块代码需要重新打包编译,其他模块不变,这样打包速度就能很快。HotModuleReplacement(HMR/热模块替换):在程序运行中,替换、添加或删除模块,而无需重新加载整个页面。此时 css 样式经过 style-loader 处理,已经具备 HMR 功能了。但是 js 还不行。上面这样写会很麻烦,所以实际开发我们会使用其他 loader 来解决。。原创 2024-02-24 23:51:42 · 1273 阅读 · 0 评论 -
【Webpack】提升开发体验 - SourceMap 的使用
所有 css 和 js 合并成了一个文件,并且多了其他代码。此时如果代码运行出错那么提示代码错误位置我们是看不懂的。一旦将来开发代码文件很多,那么很难去发现错误出现在哪里。所以我们需要更加准确的错误提示,来帮助我们更好的开发代码。原创 2024-02-24 23:51:10 · 619 阅读 · 0 评论 -
【Webpack】CSS 处理
Css 文件目前被打包到 js 文件中,当 js 文件加载时,会创建一个 style 标签来生成样式这样对于网站来说,会出现闪屏现象,用户体验不好我们应该是单独的 Css 文件,通过 link 标签加载性能才好。原创 2024-02-17 17:30:59 · 582 阅读 · 0 评论 -
【Webpack】生产模式
生产模式是开发完成代码后,我们需要得到代码将来部署上线。这个模式下我们主要对代码进行优化,让其运行性能更好。原创 2024-02-17 17:30:29 · 859 阅读 · 0 评论 -
【Webpack】自动执行开发服务器 devServer
每次写完代码都需要手动输入指令才能编译代码,太麻烦了,我们希望一切自动化,即修改代码后服务器浏览器自动刷新。原创 2024-02-17 17:29:58 · 642 阅读 · 0 评论 -
【Webpack】处理 HTML 资源
去掉引入的 js 文件,因为 HtmlWebpackPlugin 会自动引入。此时 dist 目录就会输出一个 index.html 文件。原创 2024-02-17 17:29:28 · 658 阅读 · 0 评论 -
【Webpack】处理 js 资源
Webpack 对 js 处理是有限的,只能编译 js 中 ES 模块化语法,不能编译其他语法,导致 js 不能在 IE 等浏览器运行,所以我们希望做一些兼容性处理。其次开发中,团队对代码格式是有严格要求的,我们不能由肉眼去检测代码格式,需要使用专业的工具来检测。我们先完成 Eslint,检测代码格式无误后,在由 Babel 做代码兼容性处理。原创 2024-02-17 17:28:54 · 1291 阅读 · 0 评论 -
【Webpack】处理字体图标和音视频资源
就是在处理字体图标资源基础上增加其他文件类型,统一处理即可。打开 index.html 页面查看效果。打开 index.html 页面查看效果。原创 2024-02-17 17:28:23 · 834 阅读 · 0 评论 -
【Webpack】打包资源的名称路径和清空打包资源
(注意:需要将上次打包生成的文件清空,再重新打包才有效果)观察 dist 目录资源情况。原创 2024-02-17 17:27:21 · 847 阅读 · 0 评论 -
【Webpack】处理图片资源
过去在 Webpack4 时,我们处理图片资源通过和url-loader进行处理现在 Webpack5 已经将两个 Loader 功能内置到 Webpack 里了,我们只需要简单配置即可处理图片资源。原创 2024-02-17 17:26:50 · 777 阅读 · 0 评论 -
【Webpack】处理样式资源
Webpack 本身是不能识别样式资源的,所以我们需要借助 Loader 来帮助 Webpack 解析样式资源我们找 Loader 都应该去官方文档中找到对应的 Loader,然后使用官方文档找不到的话,可以从社区 Github 中搜索查询Webpack 官方 Loader 文档css-loader:负责将 Css 文件编译成 Webpack 能识别的模块:会动态创建一个 Style 标签,里面放置 Webpack 中 Css 模块内容此时样式就会以 Style 标签的形式在页面上生效。原创 2024-02-17 17:26:15 · 670 阅读 · 0 评论 -
【Webpack】基本配置
开发模式顾名思义就是我们开发代码时使用的模式。编译代码,使浏览器能识别运行开发时我们有样式资源、字体图标、图片资源、html 资源等,webpack 默认都不能处理这些资源,所以我们要加载配置来编译这些资源代码质量检查,树立代码规范提前检查代码的一些隐患,让代码运行时能更加健壮。提前检查代码规范和格式,统一团队编码风格,让代码更优雅美观。原创 2024-02-17 17:25:40 · 749 阅读 · 0 评论 -
【Webpack】基本使用和概述
两种开发模式开发模式:代码能编译自动化运行生产模式:代码编译优化输出Webpack 基本功能开发模式:可以编译 ES Module 语法生产模式:可以编译 ES Module 语法,压缩 js 代码Webpack 配置文件5 个核心概念entryoutputloaderpluginsmodedevServer 配置Webpack 脚本指令用法webpack直接打包输出启动开发服务器,内存编译打包没有输出。原创 2024-02-17 17:25:04 · 537 阅读 · 0 评论