Question

我在react应用程序中使用了很棒的样板，我想在我的应用程序中使用media，例如图片，视频和字体。参考链接是here。

如何使用react配置所有必需的资源。在webpack.config.js中添加资产配置后出现错误。
如果有人对它的配置方式有所了解。我这样写：

我使用此配置：

{
    test: /\.(jpe?g|png|gif|svg)$/i,
     use: [
             {
               loader: 'file-loader'
             }
     ]
 }

Answer 1

实际上，示例的主要链接是this link，它的稳定版本始终在此处。

为获得确切答案，您可以使用以下代码为所有媒体导入file-loader：

    {
        test: /\.(woff|woff2|eot|ttf|svg)$/,
        exclude: /node_modules/,
        loader: 'file-loader',
        options: {
            limit: 1024,
            name: '[name].[ext]',
            publicPath: 'font/',
            outputPath: 'font/'
        }
    },
    {
        test: /\.(jpg|png)$/,
        exclude: /node_modules/,
        loader: 'file-loader',
        options: {
            limit: 1024,
            name: '[name].[ext]',
            publicPath: 'img/',
            outputPath: 'img/'
        }
    }

完成此设置后，您可以使用以下地址访问媒体：

CSS： 背景：url（'./ img / myMedia.jpg'）;

@font-face {
    font-family: 'as-you-wish';
    src: url('./font/yourFont.eot');
}

DOM：

<img src='/dist/img/myMedia.jpg' />

但是请记住，此配置位于第二个对象之后的rule:中，因此您的结果配置必须如下所示：

    module: {
        rules: [
            {
                test: /\.(js|jsx|jss)$/,
                exclude: /(node_modules[\/\\])(?!mqtt)/,
                use: [
                    {
                        loader: 'babel-loader',
                    },
                    {
                        loader: 'shebang-loader',
                    }
                ]
            },
            {
                test: /\.pcss$/,
                exclude: /(node_modules\/)/,
                use: ExtractTextPlugin.extract({
                    fallback: 'style-loader',
                    use: [
                        {
                            loader: 'css-loader',
                            options: {
                                modules: true,
                                importLoaders: 1,
                                localIdentName: '[local]',
                                sourceMap: true,
                            }
                        },
                        {
                            loader: 'postcss-loader',
                            options: {
                                config: {
                                    path: `${__dirname}/../postcss/postcss.config.js`,
                                }
                            }
                        }
                    ]
                })
            },
            {
                test: /\.(woff|woff2|eot|ttf|svg)$/,
                exclude: /node_modules/,
                loader: 'file-loader',
                options: {
                    limit: 1024,
                    name: '[name].[ext]',
                    publicPath: 'font/',
                    outputPath: 'font/'
                }
            },
            {
                test: /\.(jpg|png)$/,
                exclude: /node_modules/,
                loader: 'file-loader',
                options: {
                    limit: 1024,
                    name: '[name].[ext]',
                    publicPath: 'img/',
                    outputPath: 'img/'
                }
            }
        ],
    }

因此，在注意[name].[ext]中的name:之后，我将其更改为生产版本的[hash:base64:5].[ext]。

对于任何问题，请在Github repo中留下问题消息。

如何为媒体资源配置Webpack和ReactJS的字体

1 个答案: