Webpack5 - build시 css 파일 분리하기

1. 패키지 다운

 

npm install mini-css-extract-plugin --save-dev

 

'--save-dev' 는 개발시에만 사용한다는 의미다.

만약 선언하지 않고 받으면 

 

npm run build 시

devDependencies, dependencies 중 

dependencies에 포함된다.

 

runtime 때는 필요가 없으니 제외시킨다. 

다시 말해서 build time 때만 css를 따로 뽑아주는 플러그인이 필요하니

devDependencies에 포함되어야 한다.

 

---

2. webpack.config.js 설정

// can't use ecma script module. use only common.js
const path = require('path');
const TerserPlugin = require('terser-webpack-plugin');
// 여기 추가  ↓↓↓↓↓↓
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

// minimum option
module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'bundle.[contenthash].js',
        path: path.resolve(__dirname, './dist'),
        /**
         * publicPath
         * under version 4: publicPath is empty('').
         * over version 4: publicPath is auto
         * 
         * can use list
         *      1. 'dist/'
         *      2. 'https://image.oliveyoung.co.kr/uploads/contents/202410/25oyDay/pc_visual.jpg'
         */
        publicPath: 'dist/'
    },
    mode: 'none',
    module: {
        /**
         * webpack: I don't know what that menas 'import Kiwi...'
         * me: thank you for asking, If you don't know somethig, you should check out the rules.
         * webpack: perfect
         */
        rules: [
            {
                test: /\.(png|jpg)$/,
                /**
                 * asset/inline  :bake image into base64. could be larger file size(more better)
                 * asset/resource: request image each of them. cost of call is larger
                 */
                type: 'asset',
                parser: {
                    dataUrlCondition: {
                        maxSize: 3 * 1024 // 3kilobyte
                    }
                }
            },
            {
                test: /\.txt$/,
                type: 'asset/source'
            },
            {
                // loader should be installed explicitly
                test: /\.css$/,
                use: [
                	// 여기 추가  ↓↓↓↓↓↓
                    MiniCssExtractPlugin.loader, 'css-loader'
                ]
            },
            {
                test: /\.scss$/,
                // webpack invoke right to left in array
                // 
                use: [
                	// 여기 추가  ↓↓↓↓↓↓
                    MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'
                ]
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/env'],// ecmascript 8,7,6,5 make down version
                        plugins: ['@babel/plugin-proposal-class-properties']
                    }
                }
            }
        ],
    },
    plugins: [
        new TerserPlugin(),
        
        // 여기 수정  ↓↓↓↓↓↓
        new MiniCssExtractPlugin({
            filename: 'style.[contenthash].css',
        })
    ]
}

 

순서는

-> 패키지 import

-> plugin에 사용할 클래스 생성

 

-> 타켓팅할 파일 확장자 만나면 해당 객체가 수행함

 

 

 

---

css 따로 extract 해주지 않으면

빌드시 한가지만 번들된다

 

-> bundle.js

 

extract 해주면 두개가 빌드된다.

-> bundle.js

-> style.js