Webpack

CommonJS, AMD, ES2015 모듈 포맷 등을 모두 지원하며 여러 자원에 대한 의존성을 함께 관리해주는 번들링 도구

번들러 사용 시, 모듈 지원이 불가능한 브라우저에서의 의존성 관리 문제를 해결 가능하고 개발 생산성을 향상 시켜준다.

entry 와 output

webpack은 JS뿐만 아니라 CSS, 이미지 등 리소스들을 모두 모듈로 로딩한다.

module.exports = {
    entry : './src/index.js',
    output : {
        path: path.resolve(process.cwd(), 'dist'),
        filename: 'bundle.js'
    },
}

entry : 모듈간의 의존성의 시작점

output : 번들링의 결과가 저장될 파일의 경로나 파일명을 설정하는 옵션

Loader

webpack에서 이미지나 CSS파일들을 모듈 형태로 작성하여 가져올 수 있도록 번들링 과정에서 JS로 변환해주는 옵션

module.exports = {
    module: {
        rules: [
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader'],
            },
            {
                test: /\.(png|jpg|gif)$/i,
                use: ['file-loader'],
            },
        ],
    },
}

Plugin

번들 파일이 생성되는 방식을 수정하거나, 환경 변수 주입, 난독화 및 압축 등의 작업을 수행

자주 사용하는 Plugin

HtmlWebpackPlugin : 번들 파일을 포함하는 HTML 파일을 자동으로 생성해주는 플러그인
TerserPlugin : terser라는 자바스크립트 파서이자 압축 도구를 이용해 자바스크립트 코드를 경량화 해주는 플러그인
MiniCssExtractPlugin : CSS 파일을 자바스크립트 번들에 포함하지 않고 별도의 css파일로 분리해주는 플러그인
CssMinimizerPlugin : CSS 자원을 분석하여 최적화 및 최소화를 해주는 플러그인
CleanWebpackPlugin : output.path에 위치한 파일들을 모두 제거 / 이전의 번들 파일 결과를 삭제하기 위해 사용

// webpack.prod.config.js
 
module.exports = {
    mode: 'production',
    entry: './src/index.js',
    output: {
        path: path.resolve(process.cwd(), 'dist'),
        filename: '[name].[contenthash].js',
        environment: {
            arrowFunction: false,
        },
    },
 
    plugins: [
        new HtmlWebpackPlugin({template: 'index.html'}),
        new MiniCssExtractPlugin(),
        new CleanWebpackPlugin(),
    ],
 
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [MiniCssExtractPlugin.loader, 'css-loader'],
            },
            {
                test: /\.(png|jpg|gif)$/i,
                use: ['file-loader'],
            },
        ],
    },
 
    optimization: {
        minimize: true,
        minimizer: [
            new TerserPlugin({
                extractComments: false,
            }),
            new CssMinimizerPlugin(),
        ]
    }
}

Test Code Splitting