React 16, Babel 7, Webpack 4, React-Intl - шрифт отлично работает на сервере разработки, но не работает - PullRequest
0 голосов
/ 30 апреля 2019

Используя React 16, Babel 7, Webpack 4, & React-Intl, шрифты отлично работают на webpack-dev-server, но не работают при сборке рабочей версии (webpack --mode production). Смотрите фото внизу.

Я не уверен, если это мои React-Intl или шрифты не включены? Я использую Material-UI для каркаса элементов пользовательского интерфейса. Каков наилучший способ отладки этого?

Кроме того, когда я пытаюсь "build:messages": "NODE_ENV=production babel src --out-file /dev/null", ничего не происходит. Сообщения не извлекаются с помощью плагина babel-plugin-react-intl.

ОБНОВЛЕНИЕ 1: Использование шрифта Roboto через тему Material-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 работает enter image description here

производственная сборка не работает enter image description here

...