首页
沸点
课程
数据标注
HOT
AI Coding
更多
直播
活动
APP
插件
直播
活动
APP
插件
搜索历史
清空
创作者中心
写文章
发沸点
写笔记
写代码
草稿箱
创作灵感
查看更多
登录
注册
webpack5
坚强的呱呱呱
创建于2022-08-28
订阅专栏
主要分为基础篇和高级篇。让我们一起彻底搞懂webpack吧!
等 1 人订阅
共17篇文章
创建于2022-08-28
订阅专栏
默认顺序
默认顺序
最早发布
最新发布
webpack5 - 优化代码运行性能
优化代码运行性能 Code Split 为什么 打包代码时会将所有 js 文件打包到一个文件中,体积太大了。我们如果只要渲染首页,就应该只加载首页的 js 文件,其他文件不应该加载。 所以我们需要将打
webpack5 - 减少代码体积
减少代码体积 Tree Shaking 为什么 开发时我们定义了一些工具函数库,或者引用第三方工具函数库或组件库。 如果没有特殊处理的话我们打包时会引入整个库,但是实际上可能我们可能只用上极小部分的功
webpack5 - 提升打包构建速度
提升打包构建速度 HotModuleReplacement 为什么 开发时我们修改了其中一个模块代码,Webpack 默认会将所有模块全部重新打包编译,速度很慢。 所以我们需要做到修改某个模块代码,就
webpack5 - 提升开发体验
提升开发体验 SourceMap 为什么 开发时我们运行的代码是经过 webpack 编译后的,例如下面这个样子: 所有 css 和 js 合并成了一个文件,并且多了其他代码。此时如果代码运行出错那么
webpack5基础篇 - Css 处理(html和js是默认被压缩)
Css 处理 提取 Css 成单独文件 Css 文件目前被打包到 js 文件中,当 js 文件加载时,会创建一个 style 标签来生成样式 这样对于网站来说,会出现闪屏现象,用户体验不好 我们应该是
webpack5基础篇 - 生产模式介绍
生产模式介绍 生产模式是开发完成代码后,我们需要得到代码将来部署上线。 这个模式下我们主要对代码进行优化,让其运行性能更好。 优化主要从两个角度出发: 优化代码运行性能 优化代码打包速度 生产模式准备
webpack5基础篇 - 开发服务器&自动化
开发服务器&自动化 每次写完代码都需要手动输入指令才能编译代码,太麻烦了,我们希望一切自动化 1. 下载包 2. 配置 webpack.config.js 3. 运行指令 注意运行指令发生了变化 并且
webpack5基础篇 - 处理 Html 资源
处理 Html 资源 1. 下载包 2. 配置 webpack.config.js 3. 修改 index.html 去掉引入的 js 文件,因为 HtmlWebpackPlugin 会自动引入 4.
webpack5基础篇 - 处理 js 资源
处理 js 资源 有人可能会问,js 资源 Webpack 不能已经处理了吗,为什么我们还要处理呢? 原因是 Webpack 对 js 处理是有限的,只能编译 js 中 ES 模块化语法,不能编译其他
webpack5基础篇 - 处理其他资源
处理其他资源 开发中可能还存在一些其他资源,如音视频等,我们也一起处理了 1. 配置 就是在处理字体图标资源基础上增加其他文件类型,统一处理即可 2. 运行指令 打开 index.html 页面查看效
webpack5基础篇 - 处理字体图标资源
处理字体图标资源 1. 下载字体图标文件 打开阿里巴巴矢量图标库 选择想要的图标添加到购物车,统一下载到本地 2. 添加字体图标资源 src/fonts/iconfont.ttf src/fonts/
webpack5基础篇 - 自动清空上次打包资源
自动清空上次打包资源 1. 配置clean: true, (自动将上次打包目录资源清空) 2. 运行指令 观察 dist 目录资源情况
webpack5基础篇 - 修改输出资源的名称和路径
修改输出资源的名称和路径 1. 配置 2. 修改 index.html 3. 运行指令 此时输出文件目录: (注意:需要将上次打包生成的文件清空,再重新打包才有效果)
webpack5基础篇 - 处理图片资源
处理图片资源 过去在 Webpack4 时,我们处理图片资源通过 file-loader 和 url-loader 进行处理 现在 Webpack5 已经将两个 Loader 功能内置到 Webpac
webpack5基础篇 - 处理样式资源
处理样式资源 本章节我们学习使用 Webpack 如何处理 Css、Less、Sass、Scss、Styl 样式资源 介绍 Webpack 本身是不能识别样式资源的,所以我们需要借助 Loader 来
webpack5基础篇 - 基本配置
基本配置 在开始使用 Webpack 之前,我们需要对 Webpack 的配置有一定的认识。 5 大核心概念 entry(入口) 指示 Webpack 从哪个文件开始打包 output(输出) 指示
webpack5基础篇 - 基本使用
最近在项目中使用到了webpack对项目的图片、css兼容性、js的兼容性、减少代码体积等进行了优化。我这边主要使用的是webpack5,今天就让我们一起来看看吧! 基本使用 Webpack 是一个静