How to config webpack for media assets & font for reactjs

Question

I used a awesome boilerplate for react application, I wanna to use media like pictures or videos and fonts in my application. the reference link is here.

How to config all required resources with react. I am getting error after add assets configuration in webpack.config.js.
If anyone have idea about how config it tell me. I wrote like below:

I use this config:

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

AmerllicA · Answer 1 · 2020-06-30T05:28:58.997

Actually the main link of example is this link and the stable version of it will be always here.

For your exact answer you can use below code to import the file-loader for all media:

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

After this setting you can access to your media by using this these addresses:

CSS : background: url('./img/myMedia.jpg');

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

DOM :

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

But remember this config is in rule: after the second object, so your result config must be like these:

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

So after it pay attention to [name].[ext] in name:, I change it to [hash:base64:5].[ext] for production version.

For any issues, leave an issue message in Github repo.

How to config webpack for media assets & font for reactjs

1 Answers1