ts+webpack视频播放器组件（二）

原视频：https://www.bilibili.com/video/BV1sU4y1a7ri

day2，icon导入，需求分析

播放器需要用到一些图标，比如暂停、全屏等等。
进入iconfont下载选择的icon，并下载到本地。
将压缩包内的iconfont.css放入src根目录下的assets中的css文件夹。并将压缩包内的woff，svg，eot，ttf，woff2文件放入assets中的icon文件夹，并根据路径，修改iconfont.css中对应的url。

在main.js中先进行对iconfont的导入，然后在index.html中测试并使用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<i class="iconfont player-24gf-pause2"></i>
</body>
</html>

为了更好的开发体验，将项目文件改成ts。首先修改文件后缀js为ts。然后再webpack.config.js中的entry入口修改。由于修改为ts后，main.ts中对a.ts的导入就不允许附带.ts，所以需要在webpack.config.js中添加对打包拓展名的识别。

const path = require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin')
const {CleanWebpackPlugin} = require('clean-webpack-plugin')

module.exports = {
  entry:'./src/main.ts',
  output:{
    path:path.resolve(__dirname,'dist'),
    filename: "main.js"
  },
  resolve: {
    "extensions":['.ts','.js','.json']
  },
  devServer: {
    static:'/dist',
    open:true
  },
  module:{
    rules: [
      {
        test: /\.css$/,
        use:['style-loader','css-loader']
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./src/index.html",
    }),
    new CleanWebpackPlugin()
  ],
  mode:'development'
}

修改了上述两处内容后，运行npm run serve运行查看具体效果，发现报错。提示需要loader。使用pnpm i -D ts-loader typescript安装插件。

安装成功后，进入webpack.config.js中，添加对ts文件的配置。

const path = require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin')
const {CleanWebpackPlugin} = require('clean-webpack-plugin')

module.exports = {
  entry:'./src/main.ts',
  output:{
    path:path.resolve(__dirname,'dist'),
    filename: "main.js"
  },
  resolve: {
    "extensions":['.ts','.js','.json']
  },
  devServer: {
    static:'/dist',
    open:true
  },
  module:{
    rules: [
      {
        test: /\.css$/,
        use:['style-loader','css-loader']
      },
      {
        test:/\.ts$/,
        use:['ts-loader'],
        exclude: /node_modules/
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./src/index.html",
    }),
    new CleanWebpackPlugin()
  ],
  mode:'development'
}

再次运行webpack，运行成功。