귤귤의 대모험

이전 포스팅에서는 이미지 관련 파일 적용과

실시간 코드 반영을 설정하는 법을 알아보았습니다

이제 build시 파일 자동 삭제 및 CSS파일을 생성하는 방법을 알아보도록 하겠습니다

이제 것 많은 웹팩을 만들기 위해 많은 7개의 포스팅을 했습니다

이전 포스팅들을 확인하고싶으시면 카테고리 webpack을 클릭하시면

보실 수 있습니다

이전 포스팅은 아래에 링크로 걸어 두도록 하겠습니다

2022.07.27 - [IT_Web/Webpack] - 웹팩 실시간 코드 반영 및 Webpack file-loader 이미지 파일 적용하기

현재 상태에서 build하면 새로운 js파일이 생성됩니다.

이렇게 생성된 파일은 불필요한 파일이라서 자동 삭제하는 방법을 알아보겠습니다

clean-webpack 기능 설정하기

우선 아래의 코드로 라이브러리를 설치합니다

pm i clean-webpack-plugin --save-dev

그리고 아래와 같이 webpack.prod.js파일을 수정합니다

그리고 npm run build을 한다면 파일이 한개만 생성되는 것을 확인할 수 있습니다.

const path = require("path");
const common = require('./webpack.common');
const { merge } = require('webpack-merge');

const { CleanWebpackPlugin } = require('clean-webpack-plugin'); //추가부분

module.exports = merge(common, {
    mode: "production",
    output: {
        filename: "main.[contentHash].js",
        path: path.resolve(__dirname, "dist")
    },
    plugins: [new CleanWebpackPlugin()] //추가부분
});

mini-css-extract-plugin 기능 설정하기

자바스크립트는 인터프린터언어라서 해석해주는 단계가 있기 때문에 CSS 적용하기까지 어느 정도의 시간이 소요된다

그래서 빌드를 할때에도 CSS 파일로써 디자인을 적용하는 방법인

mini-css-extract-plugin 라이브러리를 사용해서 문제를 해결합니다

우선 아래와 같이 코드를 수정하여 주시길 바랍니다

webpack.common.js

const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require("path");
module.exports = {
    entry: "./src/index.js",
    module: {
        rules: [
            /*{
                test: /\.css$/,
                use: ["style-loader", "css-loader"]
            },이 부분은 잘라내기하여 webpack.dev.js에 붙여넣습니다*/
            {
                test: /\.html$/,
                use: ["html-loader"]
            },
            {
                test: /\.(svg|png|jpg|gif)$/,
                use: {
                    loader: "file-loader",
                    options: {
                        name: "[name].[hash].[ext]",
                        outputPath: "imgs"
                    }
                }
         	}
        ]
    },
    plugins: [
    	new HtmlWebpackPlugin({
    		template: "./src/template.html"
    	})
    ]
};

개발 버전에서는 문제가 되지 않아 기존 작업을 유지합니다

webpack.dev.js

module.exports = merge(common, {
    mode: "development",
    output: {......},
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ["style-loader", "css-loader"]
            }
        ]
    } // webpack.common.js 파일의 css 모듈을 여기에다 붙여넣는다
});

운영에서 배포할 때가 중요합니다

CSS파일로써 디자인을 적용하기 위해 아래와 같이 코드 수정을 합니다

webpack.prod.js

const MiniCssExtractPlugin = require('mini-css-extract-plugin'); // 추가 부분
module.exports = merge(common, {
    mode: "production",
    output: {......},
    plugins: [
        new MiniCssExtractPlugin({filename: "[name].[contentHash].css"}),
        new CleanWebpackPlugin()
    ], // 추가 부분
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [MiniCssExtractPlugin.loader, "css-loader"]
            }
        ]
    } // 추가 부분
});

 이렇게 설정을 하게 되면

빌드를 실행할 경우 CSS파일이 생성되는 것을 확인할 수 있습니다

그럼 다음 포스팅에서는 빌드를 실행할 경우  CSS, HTML, JS 파일을 하는 방법을 알아보겠습니다

이렇게 또 한 걸음씩 나아가네요!

꾸준히 하다 보면 달라진 우리들 모습을 볼 수 있겠죠!?

그럼 파이팅 하시고 

다음 포스팅도 기대해주세요!

우리 모험은 끝나지 않았습니다!