Question

我正在制作一个React应用程序，该应用程序使用Font很棒。我的webpack配置是：

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 /，但这无济于事。谢谢。

使用真棒字体和webpack

0 个答案: