안녕하세요 제로초님

public 폴더에 이미지 파일을 넣고.

src -> public -> logo@3x.png

src -> pages -> Email -> index.tsx Component 에서 <img src="/logo@3x.png"> 이런 식으로 불러 올려 하는 데 계속 불러 오지지가 않습니다.

Email -> index.tsx

     <Header>
                <img src="/logo@3x.png" />
            </Header>

이런식 으로 계속 출력 되네요.

일반 create-react-app 이나 기존 사용 했을 떈 잘 작동했는데 왜 그럴까요...

이미지 파일에 문제가 있는 아닌 거 같은데

웹팩 설정 부분 입니다.

import path from 'path';
import ReactRefreshWebpackPlugin from '@pmmmwh/react-refresh-webpack-plugin';
import webpack from 'webpack';
import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';




const isDevelopment = process.env.NODE_ENV !== 'production';

const config: webpack.Configuration = {
  name: 'hayd-web',
  mode: isDevelopment ? 'development' : 'production',
  devtool: !isDevelopment ? 'hidden-source-map' : 'eval',
  resolve: {
    extensions: ['.js', '.jsx', '.ts', '.tsx', '.json'], // 바벨이 처리 활 확장자 목록.
    alias: { // ..../... 이런 것들 없애는 것. 
      '@assets': path.resolve(__dirname, 'assets'),
      '@services': path.resolve(__dirname, 'services'),
      '@contexts': path.resolve(__dirname, 'contexts'),
      '@hooks': path.resolve(__dirname, 'hooks'),
      '@components': path.resolve(__dirname, 'components'),
      '@layouts': path.resolve(__dirname, 'layouts'),
      '@pages': path.resolve(__dirname, 'pages'),
      '@typings': path.resolve(__dirname, 'typings'),
    },
  },
  entry: {  // 메인 파일. 
    app: './client',
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        loader: 'babel-loader', // tsx -> 바벨 로더가 javascript 바꿔줌. 
        options: {
          presets: [ // 바벨에 대한 설정. 
            [
              '@babel/preset-env',
              {
                targets: { browsers: ['IE 10'] }, // IE 10 지원 해 줍니다, 호환.
                debug: isDevelopment,
              },
            ], // react typescript 모든 소스 코드를 IE 까지 돌아가게.
            '@babel/preset-react',
            '@babel/preset-typescript',
          ],
          env: {
              development: {
                plugins: [['@emotion', { sourceMap: true  }], require.resolve('react-refresh/babel')],
            },
            production: {
              plugins: ['@emotion']
            }
          },
        },
        exclude: path.join(__dirname, 'node_modules'),
      },
      {
        test: /\.css?$/, // css 파일을 
        use: ['style-loader', 'css-loader'], // javascript 결과물로 만들어 줍니다. 
      },
      {
        test: /\.(jpe?g|png|gif|svg)$/,
        loader: 'file-loader'
      }
    ],
  },
  plugins: [
    //   ts 랑 webpack 이랑 동시에 돌아가게 해주는 것.
    new ForkTsCheckerWebpackPlugin({
        async: false,
        // eslint: {
        //   files: "./src/**/*",
        // },
      }),
    // 여기서 EnvironmentPlugin 에 넣으면NOD_ENV 를 node 접근 가능. 
    new webpack.EnvironmentPlugin({ NODE_ENV: isDevelopment ? 'development' : 'production' }),
  ],
  output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name].js', // name 은 client 애가 됩니다. 
    publicPath: '/dist/',
  },
 
  devServer: {
    historyApiFallback: true, // react router 
    port: 3020,
    devMiddleware: { publicPath: '/dist/' },
    static: { directory: path.resolve(__dirname) },
   
//     // ORS 문제를 해결 해 줍니다. 
//     proxy: {
//       '/api/': {
//         target: 'http://localhost:3000',
//         changeOrigin: true,
//         ws: true,
//       },
//     },
  },
};

if (isDevelopment && config.plugins) {
    config.plugins.push(new webpack.HotModuleReplacementPlugin());
    config.plugins.push(new ReactRefreshWebpackPlugin());
    // config.plugins.push(
    //   new ReactRefreshWebpackPlugin({
    //     overlay: {
    //       useURLPolyfill: true,
    //     },
    //   }),
    // );
    // config.plugins.push(new BundleAnalyzerPlugin({ analyzerMode: 'server', openAnalyzer: false }));
  }

  if (!isDevelopment && config.plugins) {
    // config.plugins.push(new webpack.LoaderOptionsPlugin({ minimize: true }));
    // config.plugins.push(new BundleAnalyzerPlugin({ analyzerMode: 'static' }));
  }

export default config;

인프런 커뮤니티 질문&답변