1.下载图标

阿里巴巴矢量图标库

选择自己的图标入库
image.png

准备下载
image.png

下载代码
image.png

使用指导，解压之后访问这个index文件即可。
image.png

2.拷贝样式和字体文件

  • src\iconfont.css
  • src\iconfont.ttf

3.index.html

src\index.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. <span class="iconfont icon-auto"></span>
  9. <span class="iconfont icon-all"></span>
  10. <span class="iconfont icon-bussiness-man"></span>
  11. <span class="iconfont icon-component"></span>
  12. </body>
  13. </html>

4.index.js

src\index.js

// 引入图标样式文件
import './iconfont.css'

5.webpack.config.js

webpack.config.js
其实只要普通的解析css就行了

const { resolve } = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    mode: 'development',
    entry: './src/index.js',
    output: {
        filename: 'built.js',
        path: resolve(__dirname, 'build')
    },
    module: {
        rules: [
            { test: /\.css$/, use: ['style-loader', 'css-loader'] },
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html',
        })
    ],
}

6.资源输出名称修改

用exclude不好，最终还生成了一个不知道干什么的文件。

// ...

module.exports = {
    // ...
    module: {
        rules: [
            // ...
            {
                test: /\.(ttf)$/,
                type: 'asset/resource',
                generator: {
                    filename: 'media/[hash:10][ext][query]',
                }
            }
        ]
    },
    // ...
}