[Setting] Webpack - Module Bundler

webpack 은 최신 JavaScript 응용 프로그램을 위한 모듈번들러 입니다.

webpack 은 애플리케이션을 처리할 때 프로젝트에 필요한 모든 모듈을 매핑하고 하나 이상의 번들을 생성하여 내부적으로 빌드합니다.

 

 

Webpack 설치하기

# npm install --save-dev webpack webpack-cli

 

 

Webpack 환경설정 파일 만들기

파일명을 webpack.config.js로 하여 환경설정파일을 만듭니다.

환경설정 파일이 가지는 속성은 Entity, Output, Loader, Plugins, Mode 가 있습니다.

자세한 설명은 아래와 같습니다.

 

 

webpack.config.js 의 속성 - Entry

entry 속성은 번들링이 시작되는 지점을 의미합니다.

시작점이 하나인 경우에는 한 페이지에서 모든게 동작하는 애플리케이션이고,

시작점이 여러개인 경우에는 여러개의 페이지를 가지고있는 애플리케이션입니다.

티스토리 블로그 같은 경우에는 스킨파일을 보시면 index.html 하나의 페이지에서 동작하도록 되어 있기 때문에 시작점이 하나이고, 대부분의 홈페이지의 경우에는 각각의 페이지가 별도로 존재하기 때문에 시작점을 여러개 사용해야 합니다.

페이지수 = 시작점의 수

하나의 시작점을 가지는 경우

module.exports = {

    entry: './src/index.js'

}

 

여러개의 시작점을 가지는 경우

module.exports = {

    entry: {

        pageOne: './src/pageOne/index.js',

        pageTwo: './src/pageTwo/index.js',

        pageThree: './src/pageThree/index.js'

    }

}

 

 

webpack.config.js 의 속성 - Output

Output 속성은 번들링을 한 다음 번들링된 파일의 이름과 파일을 저장할 장소를 지정해줍니다.

내부 속성으로 path는 파일이 저장될 루트폴더를 의미하고 filename은 루트폴더 기준으로 파일의 경로와 이름을 의미합니다.

require('path') 로 가져온 경로모듈 같은 경우에는 프로젝트 폴더를 기준으로 경로를 생성해줍니다.

const path = require('path');

 

시작점          : ./src/index.js

번들링파일 위치 : [ROOT]/dist/js/bundle.js

module.exports = {

    entry: './src/index.js', 

    output: {

        path: path.resolve(__dirname, 'dist'),

        filename: 'js/bundle.js'

    }

}

 

 

webpack.config.js 의 속성 - Loader

기본적으로 Webpack은 JavaScript, JSON 파일만 이해하기 때문에, 로더는 웹팩이 다른유형의 파일을 처리하고 애플리케이션에 유효한 모듈로 변환할 수 있도록 도와줍니다.

module.rules 에는 특정 파일 형식에 대해서 어떤 로더를 사용할것인지를 설정할 수 있습니다.

test : 정규표현식을 이용하여 파일 확장자 기준으로 로더를 적용합니다.

include/exclude : 특정 폴더만/특정 폴더를 제외하고 로더를 적용하는 경우에 사용합니다.

use : 사용할 로더와 로더에서 제공하는 옵션을 설정합니다.

module.exports = {

    entry : { ... },

    output: { ... },

    module: {

        rules: [

            {

                test: /\.(js|jsx)$/,

                include: [

                    path.resolve(__dirname, 'src/js')

                ],

                use: {

                    loader: 'babel-loader',

                    options: {

                       presets: ['@babel/preset-env'],

                       plugins: ['@babel/plugin-proposal-class-properties'],

                    }

                }

            },

        ]

    }

}

 

 

webpack.config.js 의 속성 - Plugins

로더는 특정 유형의 모듈을 변환하는 데 사용되지만 플러그인은 번들 최적화, 에셋관리, 환경변수설정 등의 넓은 범위로 사용됩니다.

플러그인을 사용하기 위해서는 우선 require 함수로 플러그인을 호출해야 합니다.

그 다음 plugins 배열 안에 new 연산자를 사용하여 객체를 하나씩 추가해주면 됩니다.

플러그인마다 객체 생성시에 요구하는 매개변수가 다르기 때문에 문서를 참조한 적용할 것을 권장합니다.

const HtmlWebPackPlugin = require("html-webpack-plugin");

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

 

module.exports = {

    entry: [ ... ],

    output: { ... },

    module: {

       rules: [ ... ]

    },

    plugins: [

        new MiniCssExtractPlugin({ filename: 'css/style.css' }),

        new HtmlWebPackPlugin({

           template: './src/index.html',

           filename: 'index.html'

        })

    ]

}

 

 

webpack.config.js 의 속성 - Mode

설정에 따라 각 환경에 대응하여 최적화를 할 수 있도록 도와줍니다.

기본값은 production 이며 개발을 하는 경우에는 development 로 사용하면 됩니다.

module.exports = {
    entry: [ ... ],
    output: { ... },
    module: {
       rules: [ ... ]
    },
    plugins: [ ... ],

    mode: 'development'
}

 

 

Webpack 번들링 하기

# npx webpack