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
中
in./~/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 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/'
        }
    }]
}

fontawesome-webfont和webpack.js配置

1 个答案: