[웹] WebPack 이란?

1. webpack이란 ( 참고 사이트 )
   • 웹팩이란 모듈 번듈링이라고 한다.
   • html파일에 들어가는 Js 파일들을 하나의 js파일로 만들어 주는 방식을 모듈 번들링 이라고 한다.
   • 즉, webpack은 다수의 js 파일을 하나의 js파일로 만들어주는 것
2. 필요한 이유
   • 옛날에는 페이지마다 새로운 html을 요청해주 뿌려주는 방식
   • 현재는 SPA 방식으로 하나의 html 페이지에 여러 개의 js 파일들이 포함 됨.
   • 연관 된 js파일들을 하나로 묶어서 관리 용이
   • 컴파일 시 파일 불러오는 시간이 번들링을 통해 줄어듬 
   • 하나의 파일로 만들어서 웹 페이지 성능 최적화 됨
3. Babel이란?
   • 최신 ES6버전을 ES 5 버전으로 변환해줌
   • 대부분의 브라우저는 es6를 지원하지만 익스플로러 같은 경우 구 버전이므로 es5로 바꿔줘야함

$ npm install @bable/node
$ npm install @bable/preset-env
$ npm install @bable/core

1. 기초 개발 환경 세팅에서 필요한 명령어
   • npm init -y
   • npm install webpack --save-dev
   • npm install -save-dev webpack-cli ( 웹팩 v4 / 이후 버전 사용 시. CLI도 설치해야 함)
   • .\node_modules\.bin\webpack -v ( 성공 시 버전 출력 )
2. js 설정 파일

const path = require('path');

module.exports={
    entry : './src/test.js',
    output: {
        filename : 'bundle.js',
        path : path.resolve(__dirname + '/build')
    },
    mode : 'none'
}


//path : 파일의 경로를 다루고 변경하는 유틸리티
//output : build 결과를 저장할 경로
//entry : build의 대상이 될 파일
//Plug-In : build 된 bundle 파일을 동적으로 특정 html 페이지에 추가 할 수 있으며 build 시에 javscript, css, html 등의 파일을 난독화 및 압축을 진행할 수 있다.

•