Конфигурация fontawesome-webfont и webpack.js

Question

Мне нужно добавить редактор реагировать-froala-wysiwyg в мое приложение 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} />

В webpack.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"
                }
            ] 
        },

Я получаю эту ошибку:

in ./~/font-awesome/fonts/fontawesome-webfont.woff2?v=4.7.0

in. / ~ / Font-awesome / fonts / fontawesome-webfont.eot? V = 4.7.0

in ./~/font-awesome/fonts/fontawesome-webfont.eot in

in ./~/font-awesome/fonts/fontawesome-webfont.woff?v=4.7.0

in ./~/font-awesome/fonts/fontawesome-webfont.ttf?v=4.7.0

in ./~/font-awesome/fonts/fontawesome-webfont.svg?v=4.7.0

Вам может понадобиться соответствующий загрузчик для обработки этого типа файлов.

Так что мне нужно знать, как я могу отредактировать файл webpack coonfig для решения этой проблемы?

Спасибо

Answer 1

Похоже, вы могли бы использовать file-loader -

Установка с npm npm install file-loader

обновить ваши загрузчики:

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