WEBPACK5_웹팩5 css 번들링하기...(이미지, 폰트용 asset폴더 따로 만들기)

아 웹팩 적용하는데 MiniCssExtractPlugin 설치하고 css 이제 통합 잘 되네
해서 같이 나온 파일들 assets 폴더 하나 만들어서 깔끔하게 정리해야지 했는데
아무리 적용해도 파일이 지멋대로 만들어지는거임

그래서 몇시간 삽질하다가 공식문서 보고 알게된것

웹팩5부터는 css 번들링하는데 딱히 file-loader를 쓸 필요가 없을것같다...

공식문서링크

여기가 나보다 더 잘 정리해 뒀으니 이거 보십시오..

이전에 사용하던 방법:

//webpack.config.js파일의 module 부분
rules: [
            {
                test: /\.(jpg|jpeg|gif|png|svg|eot|woff|ttf)$/i,
                use:[
                    {
                        loader: "file-loader",
                        options: {
                            name: 'assets/[name].[ext]',
                        },
                    }
                ]
            },
            {
                test: /\.css$/,
                use: [{
                    loader: MiniCssExtractPlugin.loader,
                    options: {
                        publicPath:''
                    }
                }, 'css-loader']
            },
        ]
코드를 입력하세요

이런식으로 하면 잘 된다고 하더라...나는 이래도 안돼서 삽질했다..

결론적으로

웹팩5 부터는 이렇게 바뀌었다

output: {
        path: path.resolve('./dist'),
        filename: '[name].js',
        assetModuleFilename: 'asset/[hash][ext][query]'
    },
    module: {
        rules: [
            {
                test: /\.(jpg|jpeg|gif|png|svg|eot|woff|ttf)$/i,
                type: 'asset/resource',
            },
            {
                test: /\.css$/,
                use: [{
                    loader: MiniCssExtractPlugin.loader,
                    options: {
                        publicPath:''
                    }
                }, 'css-loader']
            },
        ]
    },

중요한 부분은 output 에서

assetModuleFilename: 'asset/[hash][ext][query]'

요부분과

rules의

type: 'asset/resource',

이 부분이다.

타입을 'asset/resource' 로 주고 형식지정해주고 assetModuleFilename 에서 경로 지정해줍면

알아서 해당경로에 폴더만들고 파일 집어넣고 다해줌

예전처럼 file-loader로 뭐 할 필요가 없다.....

아래는 공식문서(구글번역기 돌리고 내가 오열한 부분)

항상 새로운 버전을 사용할 땐 공식문서를 읽어보는 습관을 가져야겠다.

그리고 영어를 잘해서 공식문서를 번역기 안쓰고 슥슥 읽을 수 있으면 좋겠다...

마지막으로 웬만하면 그냥 새로운 버전 쓰지말고 사람들 많이 사용하는 버전을 사용하자...(중요)