file-loader를 이용할 때 png 파일이 깨지는 현상 .

강의의 버전과는 다르게, 최신버전의 webpack v5.70.0 을 사용하고 있습니다. 

강의 내용을 따라 하다보면 file-loader를 이용해서, bg.png와 times-circle.png를 dist파일로 옮겨놔야 하는데 이 때, jpg는 정상적으로 파일이 옮겨지는 반면에 png파일은 작동하지 않습니다. 이와 관련해서 찾아보니, v5 버전 이후 [file-loader, url-loader, raw-loader]는 webpack의 기본 모듈로 채택되면서 더 이상 v6버전의 webpack과 호환이 되지 않는다고 합니다. 그러니, [file-loader,url-loader]를 설치하지 마시고 이 링크 `https://webpack.js.org/guides/asset-modules` 를 참고 하시어 사용 방법을 확인해보시는게 좋은 것 같습니다. 

아래는 url-loader를 현 강의의 예제와 동일하게 url-loader를 사용하는 방법입니다. 1-webpack/2-loader 브런치 실습 예제에서 사용 하실 수 있습니다. 2-loader의 times-circle.png 파일은 7kb 정도이니, 아래의 코드를 이용하면 times-circle.png 파일은 데이터 스트링으로 url() 함수의 인자로 전달 된 것을 볼 수 있을 겁니다. 

const path = require('path');

module.exports = {
  mode: 'development',
  entry: {
    main: './src/app.js'
  },
  output: {
    filename: '[name].js',
    path: path.resolve('./dist'),
    assetModuleFilename: '[hash][ext][query]' //file-loader output
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader'
        ]
      },
      { //url-loader 사용시 
        test: /\.(jpe?g|gif|png)$/i,
        type: 'asset',
        parser: {
          dataUrlCondition: {
            maxSize: 8 * 1024 // 8kb
          }
        }
      },
      // { //file-loader 만 사용시 
      //   test: /\.(jpe?g|gif|png)$/i,
      //   type: 'asset/resource',
      // }
    ]
  }
}