강의의 버전과는 다르게, 최신버전의 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', // } ] } }

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.

안녕하세요 html과 css를 시작한지 얼마 안되 왕초보입니다. 동영상 강의를 들으면서 따라하는 중인데 css에서 png파일이 적용이 안돼서 질문 남깁니다ㅜ 이 png 파일이 스프라이트 형식으로 되어있어서 이미지가 여러 개 있는데 처음 로고에 적용할 때는 투명 배경이 적용돼서 잘 적용했습니다. 두 번째에 같은 이미지의 다른 부분(검색 아이콘)을 넣으려고 했더니 같은 png파일임에도 불구하고 회색 배경?이 같이 들어가더라고요ㅠㅠ 여기서부터 강의를 못듣고 있습니다. 혹시 문제를 아시는 분 답변 부탁드립니다ㅠㅠㅠ