javascript - fontawesome-webfont 和 webpack.js 配置

Question

我需要将react-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"
                }
            ] 
        },

我收到此错误：

在 ./~/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-awesome/fonts/fontawesome-webfont.woff?v=4.7.0

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

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

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

所以我需要知道如何编辑 webpack 配置文件来解决这个问题？

谢谢，

标签： javascriptcssreactjswebpackfonts

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