React 16，Babel 7，Webpack 4，React-Intl-字体在开发服务器上工作正常，但在生产环境中不起作用

Question

使用React 16，Babel 7，Webpack 4和React-Intl，字体在webpack-dev-server上可以正常工作，但是当我构建{生产版本（webpack --mode production）。请参阅底部的图片。

我不确定是否包含我的React-Intl或字体吗？我将Material-UI用于UI元素的框架。调试此错误的最佳方法是什么？

此外，当我尝试"build:messages": "NODE_ENV=production babel src --out-file /dev/null"时，什么也没发生。邮件不会通过babel-plugin-react-intl插件提取。

更新1：通过Material-UI主题使用Roboto字体。检查UI元素后，看起来正确使用了Roboto字体。但是也许字体没有被加载？

更新2：我已经确定它似乎是React-Intl。我将翻译后的消息添加到窗口中，它显示了所有奇怪的字符。也许我需要一个JSON加载器来处理翻译后的消息？

.babelrc

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react",
    "mobx"
  ],
  "plugins": [
    ["@babel/plugin-proposal-decorators", { "legacy": true }],
    ["@babel/plugin-proposal-class-properties", { "loose": true }],
    ["react-intl", { "messagesDir": "./static/messages" }]
  ],
}

webpack.config.js

const path = require('path')
const CopyPlugin = require('copy-webpack-plugin')

module.exports = {
  entry: './src/index.js',
  devServer: {
    contentBase: './dist',
    historyApiFallback: true,
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/',
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        enforce: 'pre',
        test: /\.js$/,
        exclude: /node_modules/,
        use: ['eslint-loader'],
      },
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: ['babel-loader'],
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.(gif|png|jpe?g|svg)$/i,
        use: [
          'file-loader',
          {
            loader: 'image-webpack-loader',
            options: {
              disable: true,
            },
          },
        ],
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        use: [{
          loader: 'file-loader',
          options: {
            name: '[name].[ext]',
            outputPath: 'fonts/',
          },
        }],
      },
    ],
  },
  resolve: {
    extensions: ['*', '.js', '.jsx'],
  },
  plugins: [
    new CopyPlugin([
      { from: './static/index.html' },
    ]),
    new CopyPlugin([
      { from: './static/images/favicon.ico' },
    ]),
  ],
  node: {
    global: true,
  },
}

webpack-dev-server工作正常

生产版本无法正常运行