Как настроить веб-пакет для медиа-ресурсов и шрифт для реагирования - PullRequest
Новая
       9

Как настроить веб-пакет для медиа-ресурсов и шрифт для реагирования

0 голосов
/ 30 июня 2018

Я использовал потрясающий шаблон для приложения react, я хочу использовать media как изображения или видео и шрифты в своем приложении. ссылка здесь здесь .

  • Как настроить все необходимые ресурсы с помощью react. Я получаю сообщение об ошибке после добавления конфигурации активов в webpack.config.js.

  • Если у кого есть идеи о том, как его настроить, скажите мне. Я написал как ниже:

Я использую этот конфиг: 

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

1 Ответ

0 голосов
/ 30 июня 2018

На самом деле основной ссылкой примера является эта ссылка , и ее стабильная версия всегда будет здесь.

Для получения точного ответа вы можете использовать приведенный ниже код для импорта 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: background: 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 .

...