javascript - 如何为 reactjs 的媒体 Assets 和字体配置 webpack

Question

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

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

• 如果有人知道如何配置，请告诉我。我是这样写的:

我使用这个配置:

{
    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:中的[name].[ext]后，我改成了[hash:base64:5].[ ext] 用于生产版本。

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