Webpack 정리

Webpack

Webpack은 의존 관계에 있는 모듈들을 하나의 자바스크립트 파일로 번들링하는 모듈 번들러이다. 자바스크립트 파일 뿐만 아니라 CSS, Image 등도 전부 모듈로 관리하는데, Webpack은 자바스크립트 밖에 모르기 때문에 loader를 사용하여 CSS나 Image 파일들을 Webpack이 이해할 수 있도록 변경해주어야 한다.

번들링

여러 개의 파일 중 종속성이 존재하는 파일들을 하나의 파일로 묶어 패키징 시키는 과정을 의미한다.

번들링이 필요한 이유

1. 네트워크 병목을 줄여준다.

HTML 파일 내에서 <script/> 태그를 사용하여 자바스크립트 파일을 실행할 수 있는데, 이러한 자바스크립트 파일을 많이 작성하게 된다면 네트워크 병목 현상을 야기할 수 있다. 이를 해결하기 위해 하나의 자바스크립트 파일을 작성해서 실행할 수도 있지만, 하나의 자바스크립트 파일로 개발을 하게 되면 유지보수가 어려워진다. 하지만 Webpack을 사용하면 여러 파일을 하나의 파일로 묶어주기 때문에 이러한 문제를 해결할 수 있고, 네트워크 병목 현상을 최소화할 수 있다.

2. 모듈 단위의 개발이 가능하다.

Webpack이 모듈 단위의 개발을 가능하도록 해주기 때문에 유지보수 효율을 높일 수 있고, 모듈 간의 스코프에 대해 신경 쓰지 않고 개발할 수 있다.

3. 코드를 압축, 최적화할 수 있다.

Webpack은 여러 파일을 하나의 파일로 묶어주고, 여러 파일의 종속성을 분석하여 사용하지 않는 파일은 포함하지 않기 때문에 코드를 압축할 수 있다. 또한 plugin을 통해 최적화도 가능하다.

4. ES6+ 스크립트를 지원한다.

Webpack은 babel-loader를 통해 ES6+ 이상의 자바스크립트를 ES5로 만들 수 있는데, 이로 인해 오래된 브라우저에서도 ES6+ 스크립트 사용이 가능하다.

Webpack boilerplate

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: path.join(__dirname, './src/index.js'),
    output: {
        path: path.join(__dirname, 'dist'),
        filename: "bundle.js",
        assetModuleFilename: 'images/[hash][ext][query]',
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                use: 'babel-loader',
                exclude: /node_modules/,
            },
            {
                test: /\.(sa|sc|c)ss$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'sass-loader',
                ],
            },
            {
                test: /\.(png|jpe?g|gif|svg)$/,
                type: "asset/resource"
            },
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: 'style.css',
        }),
        new HtmlWebpackPlugin({
            template: path.join(__dirname, './index.html'),
        }),
    ],
}

entry: webpack이 의존성을 분석하는 시작점
output: 빌드한 결과물을 저장할 path와 filename을 설정하는 부분
module: 여러 유형의 모듈들을 처리할 방법을 설정하는 부분
babel-loader: 번들링 과정에서 js 코드를 트랜스파일링 해준다.
sass-loader: .scss, .sass 파일을 import할 수 있게 하고, 이를 읽어서 .css 파일로 변환시켜준다.
css-loader: .css 파일을 js 파일로 변환해 webpack이 이해할 수 있도록 해준다.
MiniCssExtractPlugin.loader: mini-css-extract-plugin을 사용하면 여러 개의 .css 파일을 하나의 파일로 모아준다. 하나의 파일은 plugins에서 설정할 수 있다.
asset/resource: 번들링 과정에서 .scss 나 .css 파일에서 .png, .jpg, .gif, .svg 등의 파일을 발견하면 webpack이 해당 모듈을 실행하여 output의 assetModuleFilename에 설정한 경로로 파일을 복사한다(파일명은 hashcode로 대체). 그리고 .scss 나 .css 파일에서는 .png, .jpg, .gif, .svg 파일의 경로가 복사된 경로로 변경되어 사용된다. (위 설정에서는 images/hashcode.png로 변경)
html-webpack-plugin: 번들링된 js파일을 plugins에서 template를 통해 설정한 html파일에 삽입해서 output에 설정한 경로에 새로운 html파일을 생성해준다.

Reference

https://poiemaweb.com/es6-babel-webpack-2
https://github.com/doonguk/webpack-boilerplate
https://steemit.com/javascript/@noreco/webpack
https://webpack.kr/guides/asset-modules/
https://agal.tistory.com/68