关于reactjs：Webpack 4：WOFF，WOFF2，SVG加载失败


Webpack 4: WOFF, WOFF2, SVGs failed to load

ERROR in ./node_modules/bootstrap/dist/fonts/glyphicons-halflings-regular.woff 1:4
Module parse failed: Unexpected character '' (1:4)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)

WOFF文件无法加载，我不知道文件加载器为何无法加载WOFF，WOFF2和SVG。

这是我的Webpack 4加载程序配置：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
module: {
        rules: [
            {
                //tell webpack to use jsx-loader for all *.jsx files
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                loader:"babel-loader"
            },
            {
                test: /\.css$/,
                loader:"style-loader!css-loader"
            },
            {
                test: /\.(png|jpg|jpeg|gif|svg|woff|woff2)$/,
                exclude: /node_modules/,
                loader:"file-loader"
            },
            {
                test: /\.(eot|ttf)$/,
                loader:"file-loader",
            },
            {
                test: /\.html$/,
                exclude: /node_modules/,
                loader: 'html-loader'
            },
            {
                test: /\.scss$/,
                loaders: ["style-loader","css-loader","sass-loader"]
            }
        ]
    }

请给我一个解决方案。

您可以使用webpack url-loader来解决问题。如果您使用的是npm，则可以安装npm install url-loader --save-dev，并且可以在webpack.config.js中编写如下的模块设置

1
   {test: /\.(jpg|jpeg|png|woff|woff2|eot|ttf|svg)$/,loader: 'url-loader?limit=100000'}

并导入import img from './image.svg'之类的图像

GitHub：https://github.com/webpack-contrib/url-loader

NPM：https://www.npmjs.com/package/url-loader

相关讨论

1
2
3
4
5
6
7
8
9
10
11
12
13
       {
          test: /\.woff(2)?$/,
          use: [
            {
              loader: 'url-loader',
              options: {
                limit: 10000,
                name: './font/[hash].[ext]',
                mimetype: 'application/font-woff'
              }
            }
          ]
        }

它为我工作。 而且您也可以使用resolve-url-loader

https://www.npmjs.com/package/resolve-url-loader

相关讨论