미해결
프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)
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',
// }
]
}
}
