webpack打包字体图标遇到的错误的解决方案

1.引出错误

我这个静态网站项目利用了icommon提供的字体图标，直接对该项目进行打包报错。

我在css文件应用“字体图标”：

@font-face {
  font-family: "icomoon";
  src: url("../fonts/icomoon.eot?raxfuq");
  src: url("../fonts/icomoon.eot?raxfuq#iefix") format("embedded-opentype"),
    url("../fonts/icomoon.ttf?raxfuq") format("truetype"),
    url("../fonts/icomoon.woff?raxfuq") format("woff"),
    url("../fonts/icomoon.svg?raxfuq#icomoon") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

打包报错：

ERROR in ./fonts/icomoon.ttf?raxfuq 1:0
Module parse failed: Unexpected character ' ' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)
 @ ./css/common.css (./node_modules/css-loader/dist/cjs.js!./css/common.css) 5:0-72 11:73-102
 @ ./css/common.css
 @ ./src/index.js

ERROR in ./fonts/icomoon.woff?raxfuq 1:4
Module parse failed: Unexpected character ' ' (1:4)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)
 @ ./css/common.css (./node_modules/css-loader/dist/cjs.js!./css/common.css) 6:0-73 12:73-102
 @ ./css/common.css
 @ ./src/index.js

ERROR in ./fonts/icomoon.eot?raxfuq 1:0
Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)
 @ ./css/common.css (./node_modules/css-loader/dist/cjs.js!./css/common.css) 4:0-72 9:73-102 10:73-102
 @ ./css/common.css
 @ ./src/index.js

ERROR in ./fonts/icomoon.svg?raxfuq 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> <?xml version="1.0" standalone="no"?>
| <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
| <svg xmlns="http://www.w3.org/2000/svg">
 @ ./css/common.css (./node_modules/css-loader/dist/cjs.js!./css/common.css) 7:0-72 13:73-102
 @ ./css/common.css
 @ ./src/index.js

根据错误提示：

1.ERROR in ./fonts/icomoon.ttf?raxfuq 1:0
2.ERROR in ./fonts/icomoon.woff?raxfuq 1:4
3.ERROR in ./fonts/icomoon.eot?raxfuq 1:0
4.ERROR in ./fonts/icomoon.svg?raxfuq 1:0

这显然就是webpack无法识别上面这四个文件，导致图标的引用无法解析，这四个文件正是来自“字体图标”的fonts文件：

2.解决方案

我们只需要借助url-loader加载器来加载这些文件即可。

1.在终端利用命令引入loader：

npm install url-loader --save-dev

2.在webpack.config.js文件配置loader

 module: {
    rules: [
      {
        test: /\.(woff|ttf|svg|eot)$/,//fonts目录下四个文件后缀名
        use: ["url-loader"],
      },
    ],
  },

在配置文件添加完上面代码即可

3.打包(npx webpack)：

成功打包。