【金秋打卡】第12天 webpack-dev-server 和字体图标的使用
2022/11/5 4:23:57
本文主要是介绍【金秋打卡】第12天 webpack-dev-server 和字体图标的使用,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
课程名称:TypeScript封装播放器组件
课程章节: 第2章 Webpack搭建项目环境 2.3 2.4
主讲老师:西门老舅
课程内容:
今天学习的内容是 webpack-dev-server 和字体图标的使用。
webpack-dev-server 的使用
webpack-dev-server 底层使用了 express,可以在开发阶段提供一个开发服务器,方便调试,可以自动刷新浏览器。它还会把打包的文件放到内存中,比在硬盘中更能提高访问的速度,大大提高开发效率。
安装依赖:
npm instlal -D webpack-dev-server
进行配置:
module.exports = { // ... devServer: { // 以哪个目录作为服务器根目录 contentBase: 'dist', // 启动服务后自动打开浏览器 open: true, } }
在 package.json 中新建脚本命令:
"scripts": { "dev": "webpack-dev-server", "build": "webpack" }
之后在开发阶段就可以执行下面的命令来启动开发服务:
$ npm run dev
字体图标的使用
在 iconfont.cn 上下载要用到的字体图标文件:
下载好的字体图标资源和对应的 css 文件,放到 src/assets/fonts
目录下。
将字体样式文件引入到项目的主样式文件中:
@import './assets/fonts/iconfont.css'
使用字体图标:
<i class="iconfont icon-full"></i>
配置处理字体文件
字体文件也是一种模块,需要对应的loader 进行处理。Webpack5 内置了 Assets Module 来处理这类资源:
module.exports = { module: { rules: [ // 处理字体文件 { test: /\.(eot|ttf|otf|woff2?)$/, type: 'asset', generator: { filename: 'fonts/[name].[hash:8][ext]' } } ] } }
课程收获
本节课学习了 webpack-dev-server 的用法,通过简单的配置,能大大提高开发效率。同时学习了如何在 webpack 中处理字体图标资源,相比于过去的图片,它的体积更小,也更容易使用。
这篇关于【金秋打卡】第12天 webpack-dev-server 和字体图标的使用的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-15PingCAP 黄东旭参与 CCF 秀湖会议,共探开源教育未来
- 2024-05-13PingCAP 戴涛:构建面向未来的金融核心系统
- 2024-05-09flutter3.x_macos桌面os实战
- 2024-05-09Rust中的并发性:Sync 和 Send Traits
- 2024-05-08使用Ollama和OpenWebUI在CPU上玩转Meta Llama3-8B
- 2024-05-08完工标准(DoD)与验收条件(AC)究竟有什么不同?
- 2024-05-084万 star 的 NocoDB 在 sealos 上一键起,轻松把数据库编程智能表格
- 2024-05-08Mac 版Stable Diffusion WebUI的安装
- 2024-05-08解锁CodeGeeX智能问答中3项独有的隐藏技能
- 2024-05-08RAG算法优化+新增代码仓库支持,CodeGeeX的@repo功能效果提升