fontawa-webfontandwebpack.js配置

Question

我需要将react-froala所见即所得编辑器添加到我的ReactJs应用程序中。我安装了该软件包，并在我的组件中插入了此代码段：

// Require Editor JS files.
import 'froala-editor/js/froala_editor.pkgd.min.js';
 // Require Editor CSS files.
import 'froala-editor/css/froala_style.min.css';
import 'froala-editor/css/froala_editor.pkgd.min.css';
 // Require Font Awesome.
import 'font-awesome/css/font-awesome.css';
import FroalaEditor from 'react-froala-wysiwyg'; 


<FroalaEditor model={this.state.infos} />

在网页包中。js公司：

  module: {
            rules: [
                { test: /\.tsx?$/, include: /ClientApp/, use: 'awesome-typescript-loader?silent=true' },
                { test: /\.css$/, use: isDevBuild ? ['style-loader', 'css-loader'] : ExtractTextPlugin.extract({ use: 'css-loader?minimize' }) },
                {
                    test: /\.(png|jpg|jpeg|gif|svg)$/,
                    loader: 'url-loader?limit=1024&name=images/[name].[ext]',
                    exclude: /node_modules/
                },

                {
                    test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
                    loader: "url?limit=10000&mimetype=application/font-woff"
                }, {
                    test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/,
                    loader: "url?limit=10000&mimetype=application/font-woff"
                }, {
                    test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
                    loader: "url?limit=10000&mimetype=application/octet-stream"
                }, {
                    test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
                    loader: "file"
                }, {
                    test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
                    loader: "url?limit=10000&mimetype=image/svg+xml"
                }
            ] 
        },

我得到这个错误：

在中/~/font awesome/fonts/fontawesome webfont。woff2？v=4.7.0

在中/~/font awesome/fonts/fontawesome webfont。eot？v=4.7.0

在中/~/font awesome/fonts/fontawesome webfont。eot输入

在./~/font-真棒/字体/fontawesome-webfont.woff?v=4.7.0

在./~/font-真棒/字体/fontawesome-webfont.ttf?v=4.7.0

在./~/font-真棒/字体/fontawesome-webfont.svg?v=4.7.0

您可能需要适当的加载程序来处理此文件类型。

因此，我需要知道如何编辑webpack coonfig文件来修复此问题？

谢谢

Answer 1

看起来你可以使用文件加载器-

使用npmnpm install file-loader安装

更新您的加载器：

{
    test: /\.woff(\?v=\d+\.\d+\.\d+)?$/,
    use: [{
        loader: 'file-loader',
        options: {
            name: '[name].[ext]',
            outputPath: 'fonts/'
        }
    }]
}