Webpack은 글꼴 아이콘을로드하지만 글꼴 자체는로드하지 않습니다.

개발중인 플라스크 반응 프로젝트가 있습니다. 내 이전 프레임 워크의 반응 프런트 엔드는 괜찮 았고 글꼴로드 등 모든 것이 었습니다. 불행히도 핵심 오류로 인해 플라스크 백엔드와 통신 할 수 없습니다. bundle.js를 호출하는 html 파일을로드하도록 webpack 프레임 워크를 설계 / 재 도구화 한 다음 호출됩니다. 이것은 글꼴을 제외한 거의 모든 것이 작동하는 이미지입니다 .

흥미롭게도 글꼴의 아이콘은 여전히 ​​제대로로드됩니다. 내 글꼴 파일을 난독 화하면 webpack.config.js빈 유니 코드 상자로 표시됩니다. 이것은 이것이 내 CSS의 오류이고, 어떻게 든 Arial 글꼴이 가져온 Nucleo Outline 글꼴을 덮어 쓰지만 이전 프레임 워크에서 동일한 CSS가 작동했음을 나타낼 수 있습니다.

이것은 내 webpack.config.js:

const webpack = require('webpack');
const resolve = require('path').resolve;
const config = {
     mode: process.env.NODE_ENV,
     devtool: 'eval-source-map',
     entry: __dirname + '/src/index.jsx',
     output: {
               path: resolve('../public/bundle/'),
               filename: 'bundle.js',
               publicPath: resolve('../public/bundle/')
     },
     resolve: {
               extensions: ['.js','.jsx','.css','.scss','.png','.jpg','.jpeg','.gif'],
     },
     module: {
           rules: [
                        {
                        test: /\.jsx?/,
                        loader: 'babel-loader',
                        exclude: /node_modules/,
                        query: {
                                presets: ['@babel/react','@babel/env']
                          }
                            },
                            {
                                test: /\.css$/i,
                                use: [
                                    // Creates `style` nodes from JS strings
                                    'style-loader',
                                    // Translates CSS into CommonJS
                                    'css-loader'
                                ],
                            },
                            {
                                test: /\.scss$/i,
                                use: [
                                    // Creates `style` nodes from JS strings
                                    'style-loader',
                                    // Translates CSS into CommonJS
                                    'css-loader',
                                    // Compiles Sass to CSS
                                    'sass-loader',
                                ],
                            },
                            {
                                test: /\.(png|jpe?g|gif)$/i,
                        loader: 'url-loader',
                                options: {
                      esModule: false,
                    },
                            },
                            {
                                test: /\.(ttf|woff|woff2|eot|otf)$/i,
                        loader: 'url-loader',
                            },
                ],
        },
        devServer: {
            historyApiFallback: true,
      }
};


module.exports = config;

이것은 내 파일 구조 입니다.

또한 플라스크도 JS 콘솔도 오류를 가져 오지 않습니다.

글꼴을 포함한 자산 파일의보다 심층적 인 구조입니다 .

왜 이런 일이 일어나는지 모르겠습니다. 도움을 주시면 감사하겠습니다. 정보를 추가 할 수 있습니다. 나는 기본적으로 모든 것을 시도했습니다. file-loader작동하지 않습니다 (flask가 자산을 가져 오는 데 문제가 있으며 더 이상 아이콘을 찾을 수 없음). ttf-loader도 같은 이유로 작동하지 않습니다.