[ WEBPACK 01 ] WebPack 개념 및 설치 ( Babel )

WEBPACK #01 

WebPack의 개념 및 설치에 대하여 알아보자 (Babel)

안녕하세요! 코드부기입니다! 웹팩에 대하여 알아보는 시간입니다.

WebPack 공식 사이트

다음을 클릭하면 WebPack공식 사이트로 이동됩니다.

# WEBPACK의 필요성

1) 웹 애플리케이션은 자바스크립트 패키지들을 빌드 시 로딩합니다.
단점은 패키지들을 많이 소유할수록 로딩 시간이 길어진다는 점이 있습니다.

2) 서로 다른 패키지가 같은 이름의 변수를 사용할 때 충돌합니다.
 그리고 이름이 충돌할 때 나중에 호출되는 변수가 적용됩니다.

이런 문제점들로 인해 WEBPACK이 웹애플리케이션을 구성할 때 요즘 필수적이라고 합니다.

# BUNDLER 

- 여러개의 파일들을 묶어주는 도구 ( WEBPACK, BROWSERIFY, PARCEL ) 등이 있습니다.

그 중에 WebPack이 속해있죠.

# MODULE

- 위처럼 변수의 충돌이 날 때 해결할 수 있는 방법이 모듈입니다.

*모듈은 변수가 같더라도 각각 import 하는 파일의 리턴값을 다르게 지정하여 적용이 가능합니다.

즉, 각각의 JS파일의 결과값들을 구분하여 HTML 에 적용시키는 것이 모듈입니다.

만약에 JS파일 2개 안에 동일하게 선언된 word 변수는 로딩된 파일에 모두 적용되는 것이 아닌, 해당 js 파일에만 적용됩니다.

# WEB PACK 설치

1) NODE.JS 를 설치 후 해당 프로젝트내에서 npm init을 콘솔에다가 작성합니다.

2) npm init으로 인해 프로젝트 상위 root폴더 내에 package.json 파일이 생성됩니다.

3) npm install -d webpack webpack-cli 을 선언하면, package.json 의 dependency 에

webpack, webpack-cli 가 추가됩니다. 

* WebPack V4는 WebPack-Cli가 필수적입니다.

설치가 완료된 이후의 package.json의 파일은 다음과 같습니다.

Babel-loader

Webpack이 모듈을 번들링 할 시 Babel을 이용하여 Es6이상의 코드를 변환하는데 사용합니다.

Es5로 트랜스파일링이 가능합니다.

1 2

# babel-loader 설치 $ npm install --save-dev babel-loader

cs

npm script를 변경하여 Babel 대신 WebPack을 실행시켜야 합니다.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

{   "name": "es6-project",   "version": "1.0.0",   "scripts": {     "build": "webpack -w"   },   "devDependencies": {     "@babel/cli": "^7.7.0",     "@babel/core": "^7.7.2",     "@babel/plugin-proposal-class-properties": "^7.7.0",     "@babel/preset-env": "^7.7.1",     "babel-loader": "^8.0.6",     "webpack": "^4.41.2",     "webpack-cli": "^3.3.10"   } Colored by Color Scripter

cs

화면은 다음과 같습니다.

#webpack.config.js

webpack.config.js는 webpack을 실행하게 될 때 참조하는 파일입니다.

Root폴더에다가 생성해줍니다.

<WebPack.config.js>

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32

const path = require('path'); module.exports = {   // enntry file   entry: './src/js/main.js',   // 컴파일 + 번들링된 js 파일이 저장될 경로와 이름 지정   output: {     path: path.resolve(__dirname, 'dist/js'),     filename: 'bundle.js'   },   module: {     rules: [       {         test: /\.js$/,         include: [           path.resolve(__dirname, 'src/js')         ],         exclude: /node_modules/,         use: {           loader: 'babel-loader',           options: {             presets: ['@babel/preset-env'],             plugins: ['@babel/plugin-proposal-class-properties']           }         }       }     ]   },   devtool: 'source-map',   // https://webpack.js.org/concepts/mode/#mode-development   mode: 'development' }; Colored by Color Scripter

cs

WebPack을 실행시키고 트랜스파일링 및 번들링을 실행합니다.

실행하고 나면 dist/js폴더에 파일이 하나 생성됩니다. 파일 이름은 "bundle.js"파일입니다.

해당 파일은 다중의 모듈이 하나로 번들링 된 것입니다.

다음 강의에서는 Babel-polyfill에 대하여 설명하겠습니다.

해당 기능은 babel에서 트랜스파일링하고 남은 변환되지 않은 코드입니다.

해당하는 예로는 ES6에서 새롭게 추가된 Promise, Object.assign (객체 복사), Array.from 등이 있습니다.

해당 기능은 ES5에서 대체할 기능이 없어서 변환이 불가합니다.

그럼 모두 즐코하세요!