[Webpack] Webpack5 file-loader 빌드 시 파일이 2개 나오는경우

문제

 

---

webpack.config.ts

import path from "path";

module.exports = {
    mode: 'development',
    entry: {
        main1: './src/app.tsx'
    },
    output: {
        path: path.resolve('./dist'), // 절대경로 입력
        filename: '[name].tsx'
    },
    module: {
        rules: [
           {
                test:/\.css$/i,
                use: ['style-loader', {
                    loader:'css-loader',
                    
                }]
            },
           {
               test:/\.(png|jpg)$/,
               loader: 'file-loader',
               options: {
                   publicPath: './dist/',
                   name: '[name].[ext]?[hash]',
               }
           }
        ]
    }
}

웹팩 설정을 위와 같이하고

 

src
 ㄴ aaa.png
 ㄴ app.css
 ㄴ app.tsx

body {
    background-image: url(aaa.png);
}

 

파일구조 및 app.css 파일 내용이 위와같을때 

 

웹팩 빌드시 

dist
 ㄴ aaa.png
 ㄴ cabcb7f20c6f18076ec3.png

위와 같이 팡리이 2개 생성됨

 

 

해결

---

webpack5 부터는 asset/resource를 이용

import path from "path";

module.exports = {
    mode: 'development',
    entry: {
        main1: './src/app.tsx'
    },
    output: {
        path: path.resolve('./dist'), // 절대경로 입력
        filename: '[name].tsx'
    },
    module: {
        rules: [
           {
                test:/\.css$/i,
                use: ['style-loader', {
                    loader:'css-loader',
                    
                }]
            },
            {
                test:/\.(png|jpg)$/,
                type: 'asset/resource',
                generator: {
                    filename: '[name].[ext]?[hash]'
                }
            }
        ]
    }
}

위 설정 사용 시 정상적으로 aaa.png만 생성됨

참조: https://webpack.js.org/guides/asset-modules/

Asset Modules | webpack

\