C/C++教程

【金秋打卡】第12天 webpack-dev-server 和字体图标的使用

本文主要是介绍【金秋打卡】第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 和字体图标的使用的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!