demo12源码地址
    项目目录为：
    image.png
    package.json 中使用的依赖如下：

    1. {
    2.   "scripts": {
    3.     "dev": "webpack --mode development",
    4.     "build": "webpack --mode production"
    5.   },
    6.  "devDependencies": {
    7.     "@babel/core": "^7.4.5",
    8.     "@babel/plugin-transform-runtime": "^7.4.4",
    9.     "@babel/preset-env": "^7.4.5",
    10.     "autoprefixer": "^9.5.1",
    11.     "babel-loader": "^8.0.6",
    12.     "clean-webpack-plugin": "^2.0.2",
    13.     "css-loader": "^2.1.1",
    14.     "html-loader": "^0.5.5",
    15.     "html-webpack-plugin": "^3.2.0",
    16.     "image-webpack-loader": "^5.0.0",
    17.     "lodash": "^4.17.11",
    18.     "mini-css-extract-plugin": "^0.7.0",
    19.     "node-sass": "^4.12.0",
    20.     "optimize-css-assets-webpack-plugin": "^5.0.1",
    21.     "postcss-loader": "^3.0.0",
    22.     "postcss-sprites": "^4.2.1",
    23.     "sass-loader": "^7.1.0",
    24.     "style-loader": "^0.23.1",
    25.     "url-loader": "^1.1.2",
    26.     "webpack": "^4.29.6",
    27.     "webpack-cli": "^3.3.2"
    28.   }
    29. }

    app.js中引入字体文件

    import ‘./assets/fonts/iconfont.css’

    配置webpack.config.js文件来处理字体
    借助url-loader,可以识别并且处理eot,woff等结尾的字体文件。同时，根据字体大小，可以灵活配置是否进行base64编码。
    下面的demo就是当文件大小小于5000B的时候，进行base64编码。

    1. const path = require('path')
    3. const CleanWebpackPlugin = require('clean-webpack-plugin')
    4. const HtmlWebpackPlugin = require('html-webpack-plugin')
    6. const MiniCssExtractPlugin = require('mini-css-extract-plugin') // 将 css 单独打包成文件
    8. module.exports = {
    9.   entry: {
    10.     app: './src/app.js'
    11.   },
    12.   output: {
    13.     publicPath: './', // js 引用的路径或者 CDN 地址
    14.     path: path.resolve(__dirname, 'dist'), // 打包文件的输出目录
    15.     filename: '[name].bundle.js', // 代码打包后的文件名
    16.     chunkFilename: '[name].js' // 代码拆分后的文件名
    17.   },
    18.   module: {
    19.     rules: [
    20.      {
    21.         test: /\.(scss|css)$/, // 针对.css后缀文件设置loader
    22.         // use: ["style-loader", "css-loader"]
    23.         use: [
    24.           {
    25.             loader: MiniCssExtractPlugin.loader
    26.           },
    27.           "css-loader",
    28.           //"postcss-loader", // 使用 postcss 为 css 加上浏览器前缀
    29.           {
    30.             loader: "postcss-loader",
    31.             options: {
    32.               ident: "postcss",
    33.               plugins: [require("postcss-sprites")(spritesConfig)]
    34.             }
    35.           },
    36.           "sass-loader" // 使用 sass-loader 将 scss 转为 css
    37.         ]
    38.       },
    39.       {
    40.         test: /\.(eot|woff2?|ttf|svg)$/,
    41.         use: [
    42.           {
    43.             loader: 'url-loader',
    44.             options: {
    45.               name: '[name]-[hash:5].min.[ext]',
    46.               limit: 5000, // fonts file size <= 5KB, use 'base64'; else, output svg file
    47.               publicPath: 'fonts/',
    48.               outputPath: 'fonts/'
    49.             }
    50.           }
    51.         ]
    52.       },
    53.        {
    54.         test: /\.(png|jpg|jpeg|gif)$/,
    55.         use: [
    56.           {
    57.             loader: "url-loader",
    58.             options: {
    59.               name: "[name]-[hash:5].min.[ext]",
    60.               outputPath: "images/", //输出到 images 文件夹
    61.               limit: 10000 //把小于 20kb 的文件转成 Base64 的格式
    62.             }
    63.           },
    64.           {
    65.             loader: "image-webpack-loader",
    66.             options: {
    67.               // 压缩 jpg/jpeg 图片
    68.               mozjpeg: {
    69.                 progressive: true,
    70.                 quality: 65 // 压缩率
    71.               },
    72.               // 压缩 png 图片
    73.               pngquant: {
    74.                 quality: "65-90",
    75.                 speed: 4
    76.               }
    77.             }
    78.           }
    79.         ]
    80.       }
    81.     ]
    82.   },
    83.   plugins: [
    84.     new CleanWebpackPlugin(),
    85.     new HtmlWebpackPlugin({
    86.       // 打包输出HTML
    87.       title: '自动生成 HTML',
    88.       minify: {
    89.         // 压缩 HTML 文件
    90.         removeComments: true, // 移除 HTML 中的注释
    91.         collapseWhitespace: true, // 删除空白符与换行符
    92.         minifyCSS: true // 压缩内联 css
    93.       },
    94.       filename: 'index.html', // 生成后的文件名
    95.       template: 'index.html', // 根据此模版生成 HTML 文件
    96.       chunks: ['app'] // entry中的 app 入口才会被打包
    97.     }),
    98.     new MiniCssExtractPlugin({
    99.       filename: '[name].css',
    100.       chunkFilename: '[id].css'
    101.     })
    102.   ]
    103. }

    在index.html中使用字体

    1. <html lang="en">
    2.   <head>
    3.     <meta charset="UTF-8" />
    4.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    5.     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    6.     <title>处理字体文件</title>
    7.   </head>
    9.   <body>
    10.     <div id="app">
    11.       <div class="box">
    12.         <i class="iconfont icon-yanjing"></i>
    13.         <i class="iconfont icon-yanjing1"></i>
    14.         <i class="iconfont icon-yanjing2"></i>
    15.         <i class="iconfont icon-yanjing3"></i>
    16.       </div>
    17.     </div>
    18.   </body>
    19. </html>

    打包后查看index.html文件，打包成功。
    image.png