fontawesome-webfont and webpack.js configuration

Question

I need to add the react-froala-wysiwyg editor to my ReactJs application. I installed the package and I insert this snippet in my component :

// 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} />

In the 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"
                }
            ] 
        },

I get this error :

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

You may need an appropriate loader to handle this file type.

So I need to know how can I edit the webpack coonfig file to fix this issue ?

Thanks,

Answer 1

Looks like you could use file-loader -

Install with npm npm install file-loader

update your loaders:

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