Использование шрифта Awesome и веб-пакета - PullRequest
Новая
       10

Использование шрифта Awesome и веб-пакета

0 голосов
/ 07 октября 2018

Я создаю приложение React, которое делает использование Font потрясающим.Мой конфиг веб-пакета: 

const outputDirectory = 'dist';

module.exports = {
                entry: './src/client/index.js',
                output: {
                    path: path.join(__dirname, outputDirectory),
                    filename: 'bundle.js',
                    publicPath: '/dist'
                },
                module: {
                    rules: [
                        {
                            test: /\.js$/,
                            exclude: /node_modules/,
                            use: {
                loader: 'babel-loader'
            }
        },
        { test: /\.css$/, use: ['style-loader', 'css-loader'] },
        { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file-loader' },
        { test: /\.(woff|woff2)$/, loader: 'url-loader?prefix=font/&limit=5000' },
        { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url-loader?limit=10000&mimetype=application/octet-stream' },
        { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url-loader?limit=10000&mimetype=image/svg+xml' },
        { test: /\.png(\?v=\d+\.\d+\.\d+)?$/, loader: 'url-loader?limit=10000&mimetype=image/png' },
    ]
},
resolve: {
    alias: {
        mdb: path.resolve(__dirname, 'src/client/MDB/index'),
        settingsManager: path.resolve(__dirname, 'src/client/util/settingsManager')
    },
},
devServer: {
    port: 3000,
    open: true,
    proxy: {
        '/api': 'http://localhost:8081'
    },
    historyApiFallback: true
},
plugins: [
    new CleanWebpackPlugin([outputDirectory]),
    new HtmlWebpackPlugin({
        template: './panelHtml/panel.html',
        favicon: './panelHtml/polaris.ico',
        filename: "panel.html"

    })
]
};

Все работает отлично, за исключением того, что когда я загружаю приложение, мои значки шрифта, а также потрясающие значки работают неправильно.Я посмотрел и обнаружил, что этот код (сгенерированный комплектом): 

/@font-face{font-family:'FontAwesome';src:url(/dist674f50d287a8c48dc19ba404d20fe713.eot);src:url(/dist674f50d287a8c48dc19ba404d20fe713.eot?#iefix&v=4.7.0) format('embedded-opentype'),url(/distaf7ae505a9eed503f8b8e6982036873e.woff2) format('woff2'),url(/distfee66e712a8a08eef5805a46892932ad.woff) format('woff'),url(/distb06871f281fee6b241d60582ae9369b9.ttf) format('truetype'),url(/dist912ec66d7572ff821749319396470bde.svg#fontawesomeregular) format('svg');

Это довольно трудно читать, но я обнаружил, что после добавления моего publicPath, другой / отсутствует.Где это должно быть: 

/dist/fee66e712a8a08eef5805a46892932ad.woff

это на самом деле 

/distfee66e712a8a08eef5805a46892932ad.woff

Мне удалось это временно исправить, отредактировав пакет, но мне было интересно, может ли кто-нибудь помочь мне решить его?Я попытался изменить publicPath на / dist /, хотя это не помогло. Спасибо.

...