Используя 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](https://i.stack.imgur.com/wCT1F.png)
производственная сборка не работает
![enter image description here](https://i.stack.imgur.com/GRvDu.png)