웹팩으로 Vanila JS 프로젝트 번들링하기/CSS 파일 만들기

학습 목적

• 웹페이지 클론 코딩 과제를 하던 중 확인 가능한 CSS파일이 포함되어있는 조건이 있어 구현하기위해

SCSS -> CSS 파일 만들기

mini-css-extract-plugin 설치하기

먼저 필요한 라이브러리를 설치하자

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

webpack.config.js 파일 수정

const MiniCssExtractPlugin = require('mini-css-extract-plugin');//맨 위에 추가하기

module.exports = {
    ...
    module: {
        rules: [
            {
                "test": /\.s[ac]ss$/i,
                "use": [
                    MiniCssExtractPlugin.loader,
                    "css-loader",
                    "sass-loader",
                ],
                exclude: /node_modules/
            },
            {
                test: /\.(png|jpe?g|gif|svg|webp)$/i,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: '[name].[ext]'
                        }
                    },
                ],
            },
        ]
    },
    plugins: [
        ...,
        new MiniCssExtractPlugin({
            filename: 'css/[name].css'
        }),
        ...
    ],
...
};

이 작업을 한 뒤

npm run build

빌드하게 되면

dist/css 파일 안에 css 파일이 생겼음을 볼 수 있다!