프론트엔드 로드맵 30 - 모듈번들러 Web pack

<모듈번들러란?>

자바스크립트 파일들을 (main.js, sub.js 등) 각각 분리해서 <script src="">이런 식으로 로드하면 순서에 따라 에러가 발생하는 등 여러모로 불편한 점이 생긴다. 이에 따라 모듈 단위의 개발 방식이 도입됐다. 모듈 번들러는 여러개로 나뉘어 있는 파일들을 하나의 파일로 묶어줘 이런 골치아픔을 해소시켜준다.

 

자바스크립트는 2009년부터 CommonJS라는 모듈 시스템을 사용하기 시작했으며, ECMAScript2015에선 신규 모듈 시스템인 ES Module이 포함됐다. 하지만 브라우저 사양에 따라 CommonJS와 ES Module 등의 사용이 어렵기 때문에, 모듈번들러가 모듈 코드를 분석하고 자바스크립트 코드를 변환한다. 대표적인 번들러로 RequireJS, Browserify, Rollup, Parcel, Webpack이 있다. 이중 Webpack이 가장 많이 쓰인다.

 

webpack은 ES6 버전 이상의 스크립트도 변환시켜준다. ES6 이상의 코드를 -> ES5로 (babel-loader).

자바스크립트 뿐만 아니라 LESS, SCSS 사용 가능(css-loader). CSS, Image 파일 등 리소스의 의존성도 관리한다. @import, url(...), <img src="..."> 등의 모든 구문들을 관리한다.

 

<웹팩 핵심 개념>

- Entry : 종속성 그래프의 시작점. config 파일에 설정돼 있지 않으면 ./src/index.js가 기본값이다.

- Output : 번들을 저장할 위치 지정. config 파일에 설정돼 있지 않으면 ./dist/main.js가 기본값

- Loader : 스타일시트나 이미지 등을 웹팩이 읽을 수 있도록 자바스크립트로 변경하는 역할

- Plugins : 번들된 파일을 난독화하거나(uglify) 압축하는데 사용. (플러그인 더보기)

- Mode : 옵션이 production, development, none 있는데 기본값은 production

 

 

<webpack 설치 방법>

1. 터미널에서 웹팩 설치

터미널을 열고 (윈도우버튼+R cmd) package.json 파일을 생성한다 (앞서 node.js 설치가 선행되어야 함)

npm init -y (초기화. -y는 기본값) npm install --save-dev webpack webpack-cli (웹팩 설치) $ npm install --save-dev babel-loader (babel-loader 설치)

 

2. 번들링 파일 생성

루트에 .webpack.config.js 파일 생성 후 아래와 같이 작성.

const path = require('path'); module.exports = {   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' };

번들링을 실행하면 js파일들이 하나로 번들링된 bundle.js가 생성된다

html 파일에 <script src="./dist/js/bundle.js"></script>을 넣으면 브라우저에서 작동한다.

 

 

 

 

 

참고 사이트 : https://webpack.js.org/

https://ui.toast.com/fe-guide/ko_BUNDLER/

https://poiemaweb.com/es6-babel-webpack-2