# ts-exercise-video-play

**Repository Path**: ifredom/ts-exercise-video-play

## Basic Information

- **Project Name**: ts-exercise-video-play
- **Description**: ts语法熟悉练手-视频播放弹层组件
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-10-28
- **Last Updated**: 2022-05-27

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# webpack

[教学视频](https://www.bilibili.com/video/BV1sU4y1a7ri?p=4&spm_id_from=pageDriver)

## 1. file url loader 不添加，字体图标正常加载。一旦使用 url-loader 处理 wtf 文件就无法显示字体图标

## 2. 图标加载

1. html 中 img 标签 src 加载图片 （html 模板中就不应该写 img，webpack 不处理 html 文件)

2. js 中动态创建 creament('img)加载.图片需要通过 import 引入

```js
rules:{
  {
    test: /\.(png|svg|jpg|jpeg|gif)$/i,
    type: "asset/resource",
  },
}
```

3. css 文件中通过 bakcground 设置背景加载图片 (直接使用相对地址) npm run build 无问题

## 校验打包后产物在服务器上运行

```json
npx http-server dist
```