웹팩 CSS와 html 및 webpack 활용해서 JS파일 압축하기

 

이전 포스팅에서 웹팩에서 빌드 파일 자동 삭제 및 

이미지 로딩시간을 단축하기 위해

빌드할 경우 CSS파일을 생성하는 것을 알아보았습니다

 

 

아직 못 보신 분들은 아래의 링크로 확인해 보시길 바랍니다

2022.08.01 - [IT_Web/Webpack] - 웹팩 빌드시 파일 자동 삭제 및 webpack build시 CSS파일 생성

웹팩 빌드시 파일자동 삭제 및 webpack build시 CSS파일 생성

 

 

CSS 압축하기

 

우선 필요한 라이브러리를 설치합니다

 

 

npm i optimize-css-assets-webpack-plugin --save-dev

 

아래와 같이 추가 부분을  확인하시고 코드를 수정합니다

 

webpack.prod.js

onst OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin'); // 추가부분

module.exports = merge(common, {
    mode: "production",
    output: {……},
    optimization: {
        minimizer: [
            new OptimizeCssAssetsPlugin()
        ]
    },// 추가 부분
    plugins: [……],
    module: {……}
});

 

 

npm run build를 실행하면

CSS 파일은 압축되지만 JS파일은 압축이 해제됩니다

그래서 추가적으로 라이브러리를 한 개더 사용합니다

 

그럼 아래의 라이브러리를 설치합니다

 

npm i terser-webpack-plugin --save-dev

 

 

그리고 추가적으로 코드 작업을 아래와 같이 진행합니다

 

 

webpack.prod.js

const TerserPlugin = require('terser-webpack-plugin'); // 추가부분

module.exports = merge(common, {
    mode: "production",
    output: {
        filename: "[name].[contentHash].bundle.js",
        path: path.resolve(__dirname, "dist")
    },
    optimization: {
        minimizer: [
            new OptimizeCssAssetsPlugin(),
            new TerserPlugin()
        ]
    }, // 추가 부분
    plugins: [……],
    module: {……}
});

 

 

---

 

html 파일 압축하기

 

html 파일을 압축해보겠습니다

common 파일 안에 htmlWebpackPlugin 관련 코드를 dev안으로 옮겨줍니다.

 

 

const path = require("path");
module.exports = {
    entry: "./src/index.js",
    module: {
        rules: [
            {
                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"
 	})] 잘라내기 dev파일로 옮기기*/
};

 

 

잘라내기한 코드를 아래와 같이 붙여줍니다

 

 

webpack.dev.js

const HtmlWebpackPlugin = require('html-webpack-plugin');// 추가부분

module.exports = merge(common, {
    mode: "development",
    output: {……},
    module: {……},
    plugins: [
    	new HtmlWebpackPlugin({
    		template: "./src/template.html"
    })]// 추가부분
})

 

그리고 아래와 같이 추가하여 코드를 마무리합니다

이렇게 하면 끝입니다

 

 

webpack.prod.js

const HtmlWebpackPlugin = require('html-webpack-plugin'); //추가부분

module.exports = merge(common, {
    mode: "production",
    output: {……},
    optimization: {
        minimizer: [
        	new OptimizeCssAssetsPlugin(),
        	new TerserPlugin(),
            new HtmlWebpackPlugin({
                template: "./src/template.html",
                minify: {
                    removeAttributeQuotes: true,
                    collapseWhitespace: true,
                    removeComments: true
                }
            })// 추가 부분
        ]
    },
    plugins: [……],
    module: {……}
})

 

 

 

이것으로 웹팩을 활용하여 CSS, HTML, JS파일 압축하는 방법을 알아보았습니다

간단하면서도 어려운 것 같네요

 

이제까지 진행된 총 8개의 포스팅이 있습니다

앞으로 4개 정도 더 있습니다

이전 포스팅이 궁금하시다면 카테고리의 webpack을 클릭하셔서 보실 수 있습니다

 

그럼 오늘도 공부하느라 고생하셨습니다

그럼 끝까지 파이팅 하세요

 

대모험의 끝을 봐야겠죠? ㅎㅎ

 

그럼 다음 포스팅에서 봐요~