reactjs - Webpack 4 : WOFF, WOFF2，SVG 加载失败

Question

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 加载器配置:

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"]
            }
        ]
    }

请向我提出解决方案。

Answer 1

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

   {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