[Javascript] Webpack: 자바스크립트 번들러

#Javascript

웹팩은 더 멋진 자바스크립트 개발을 위한 모듈 번들러다.
모듈과 모듈에서 사용된 css, 이미지 파일 등을 묶어서 하나, 혹은 몇개의 파일로 번들링한다.
이렇게 파일들을 잘 합쳐주기 때문에, 스크립트나 파일들이 온통 나뉘어있을 때의 로딩 부하를 줄일 수 있다.
더불어 트랜스파일러인 babel 등과도 궁합이 좋다.

웹팩은 여느 웹 관련 프로그램들이 그렇듯이, npm을 통해 설치한다.
노드가 깔려있지 않다면 깔자.

설치하고.

프로젝트 폴더를 적당히 만든다. 난 webpack_start로 했다.

그리고 에디터로 연다. 뭘로 해도 상관없지만.
vscode를 가장 추천한다.

터미널을 열어서 지역에도 webpack을 설치한다.

자바스크립트 버전 트랜스파일을 하기 위해 babel도 깔아주자.
이건 전역 말고 프로젝트 폴더에만 놓도록 하자.

맨 뒤의 babel-loader가 웹팩과의 연동을 책임지는 프로그램이다.

깔건 대충 다 깐것같다.
이제 설정파일들을 만들어주자. 좀 많다.

먼저 웹팩 설정파일을 써넣는다. 이름은 webpack.config.js.

var webpack = require('webpack');

module.exports = {
    mode: 'development',
    entry: { 
        main: __dirname + "/src/index.js" //진입점 명시
    },
    output: {
        path: __dirname+"/public/dist/", //번들링할 파일경로
        filename: '[name].js', //출력할 파일명
        publicPath: '/dist' //서버에서 접근할 때 경로
    },
    module: {
        rules: [
            {
                test: /.js$/, //.js로 끝나는 파일에 대한 정규표현식
                exclude: /node_modules/, //트랜스파일 대상 제외
                use: {
                    loader: 'babel-loader', //트랜스파일러
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            }
        ]
    }
};

이번엔 npm 설정파일을 만들어야 한다.
npm run으로 돌릴 것이기 때문이다...

{
    "scripts": {
        "build": "webpack"
    },
    "name": "webpack_test",
    "version": "0.0.0",
    "description": "Boom!!",
    "main": "index.js",
    "author": "김경직",
    "license": "MIT License",
    "devDependencies": {
        "@babel/core": "^7.6.4",
        "@babel/preset-env": "^7.6.3",
        "babel-loader": "^8.0.6",
        "webpack": "^4.41.2",
        "webpack-cli": "^3.3.10"
    }
}