【金秋打卡】第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 中处理字体图标资源，相比于过去的图片，它的体积更小，也更容易使用。