file-loader를 이용할 때 png 파일이 깨지는 현상 .
미해결
프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
강의의 버전과는 다르게, 최신버전의 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', // } ] } }
- file-loader
- png
- 웹팩
- 파일로더
- nodejs
- babel
- eslint