Webpack 이란

1. Webpack 이란

자바스크립트 애플리케이션 개발을 위한 모듈 번들러

2. 장점

1) 스크립트 태그를 하나로 묶어 초기 로딩 타임을 줄임.

2) CSS나 Image와 같은 정적 파일도 모듈 단위로 묶어 배포함.

3) ES2015를 이용해 개발하는 경우트랜스파일을 수행 뒤

     번들링 해야 하는데, Loader라는 기능으로 간단히 해결.

4) HMR을 지원하여 코드 수정될 때마다 자동 번들링 수행 및 페이지 갱신.

3. webpack 구성

특별한 파일명을 지정하지 않으면 webpack.config.js 파일을 사용

크게 Entry, Output, Module, Plugins 옵션 객체가 핵심

위 옵션 외 기타 옵션들 제공

entry

처음 로드하는 파일 지정.

 //    단일 파일 지정
 entry: __dirname + '/src/index.js'
//    다중 파일 지정entry: {    main: __dirname + '/src/index.js'    app: __dirname + '/src/main.js'}

output

번들링된 결과물의 출력 방법 지정

output: {
    path: __dirname + '/public/dist/'),
    filename: '[name].js',
    publicPath: '/dist'
}

path             - 번들링된 파일 저장 경로

filename     - 번들링된 파일명

                          ([name]을 사용할 경우 entry 지정된 파일명에 반영)

publicPath - 웹서버 이용시 사용 경로

module

프로젝트 내부에 사용하는 모듈을 수행하는 방법 지정

module: {
     rules: [
        {
            test: /\.js$/,
            loader: 'babel-loader',
            exclude: /node_modules/
        }
    ]
}

(module에서 가장 많이 설정하는 내용은 loader인데, 그중 babel-loader를 작성해봄)

test        - \.js 에 \는 정규표현식으로 .js로 끝나는 경우로 한정함

loader   - babel을 이용해 트랜스파일 하도록 지정

exclude - babel로 컴파일 하지 않을 것을 지정, 반대로 include가 있음

plugins

webpack 빌드에 사용자가 지정한 작업을 추가할 수 있는 기능을 제공

plugins: [
    new webpack.optimize.UglifyJsPlugin()
]

UglifyJsPlugin - 코드 난독화와 압축기능 제공

4. 코딩

//    webpack.config.js
varwebpack = require('webpack');
module.exports = {
    entry: {
        __dirname + '/src/index.js'
    },
    output: {
        path: __dirname + '/public/dist/'),
        filename: '[name].js',
        publicPath: '/dist'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            }
        ]
    },
    plugins: [
        new webpack.optimize.UglifyJsPlugin()
    ]
}