如何为 reactjs 配置媒体资产和字体的 webpack

Question

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

• 如何使用react 配置所有必需的资源。在webpack.config.js 中添加资产配置后出现错误。

• 如果有人知道如何配置它告诉我。我是这样写的：

我使用这个配置：

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

Answer 1

其实example的主链接是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:中的[name].[ext]之后，我将其更改为[hash:base64:5].[ext]用于生产版本。

如有任何问题，请在Github repo留言。