Webpack 4：WOFF、WOFF2、SVG 无法加载答案

【问题标题】：Webpack 4: WOFF, WOFF2, SVGs failed to loadWebpack 4：WOFF、WOFF2、SVG 无法加载
【发布时间】：2018-12-19 00:24:11
【问题描述】：

./node_modules/bootstrap/dist/fonts/glyphicons-halflings-regular.woff 1:4 中的错误模块解析失败：意外字符 '' (1:4) 您可能需要适当的加载程序来处理此文件类型。（此二进制文件的源代码省略）

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

请给我一个解决方案。

【问题讨论】：

标签： reactjs webpack webpack-dev-server woff woff2

【解决方案1】：

       {
          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

【讨论】：

感谢您的回答。

【解决方案2】：

您可以使用 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

【讨论】：