Node.js - Webpack

- Webpack

---

아직 내가 알지 못하는 JS 모듈 시스템들이 엄청나게 많다. 

ES2015모듈, RequireJS, CommonJS, UMD 같은 JS 모듈 시스템들이 나오면서 JS파일도 다른 프로그래밍 언어처럼 모듈개념이 생겨나서 상당한 의존 관계를 가지게 된다.

이러한 의존관계를 가진 JS 파일들을 파일별로 모듈을 관리할수 있게하여 각 파일의 스코프범위를 유지시켜 충돌의 위험성을 줄여야한다.

하지만 브라우저 상에서는 이러한 파일 단위 모듈 시스템을 사용하는 것이 쉽지 않다.

웹 프론트쪽에서의 JavaScript 언어는 웹페이지에 html,css,img,JSON 등 수많은 구성요소들과 엉켜있어 모듈을 IIFE 스타일로 변경해 주는 과정 뿐만 아니라 하나의 파일로 묶어(Bundled) 네트워크 비용을 최소화 할 수 있는 방법이 필요하다.

이러한 과정에서 나타난 친구가 Webpack 이다.

Webpack은 의존관계에 있는 모듈들을 하나의 자바스크립트 파일로 번들링하는 모듈 번들러이다.

gulp 와 grunt 의 뒤를 이어 등장한 Webpack은 등장 이후 공식 모듈 번들러가 되었지만 치명적인 약점중 하나로 '설정'이 복잡하다는 단점이 있었다. 설정이 많다는 것은 좋게 보면 다양한 입맛을 맞춰줄 수 있다는 뜻이지만 초보 개발자 혹은 Webpack에 익숙하지 않은 사람들에게는 러닝커브(학습곡선)만 증가시키는 꼴이었다.

경쟁사가 parcel이라는 설정없는 새로운 모듈 번들러를 등장시키고 위기를 느낀 Webpack은 현재 버전 Webpack4 로 Zero-configuration(설정 파일 없는 빌드)가 가능한 버전으로 업그레이드 시켰다고 한다.

맛보기로 달라진 Webpack을 한번 사용해보는것도 나쁘지 않으니 설정부터 시작해보자.

- Hello World

---

준비사항에 대한 코드는 전 Babel에 관해 게시된 코드를 그대로 사용하겠다.

http://mwoo526.tistory.com/32?category=694045 - Hello World

- Webpack 설정

---

먼저 설치 과정이다.

npm install webpack webpack-cli --save-dev

Webpack3 까지는 webpack 만 설치해도 됬었는데 Webpack4부터는 webpack-cli 을 같이 설치해야 커맨드라인에 webpack 이라는 명렁어를 사용할수 있다.

그리고 난후 package.json 에 새로운 스크립트를 추가하자.

"build" : "webpack"

 여기서 Webpack4 의 Mode 과 Entry 라는 개념을 집고 넘어가자.

• Mode

Webpack4에서 추가된 개념으로 mode를 2가지로 설정할 수 있다. development - 개발용, production - 배포용 

예를 들어 개발용으로서 mode를 정의할려면 스크립트를 아래와 같이 수정하자.

"build" : "webpack --mode development"

• Entry

entry 는 Webpack이 파일이 읽어들이기 시작하는 부분이다.

Webpack에서 모든 것은 모듈이기에 Javascript, StyleSheet , Image 등 모든 것을 JavaScript 모듈로 로딩해서 사용하므로 이러한 의존관계의 시작점을 entry로 정의하고 설정해야한다.

webpack4는 이전 버전들과 달리 따로 entry 포인트르 명시해주지 않아도 자동적으로 정해진 위치에 파일을 찾는다.

정해진 위치의 파일은 바로  src폴더안에  index.js 이다.

그렇다면 app.js , server.js  중에 Entry를 먼저 찾아 보자.

app.js 에서 정의된 Sever 클래스를 import 해서 사용하는 server.js 의존관계의 시작점이라고 할수 있다.

server.js 를 index.js로 rename 하고 src 폴더를 생성하고 삽입시키자.

이 예제를 그대로 따라하는 분이라면 하나 더 주의해야 할 점으로 import 경로를 ./app 에서 ../app 으로 수정해줘야 한다.

(src 폴더 안에 있는 index.js 와 밖에 있는 app.js 의 위치차이로 인해)

그리고 난뒤에 npm run build 를 해보자. 

 

Warning 과 Error 투성이다. Why? 왜?

node_moudles 에서 빌드하는 과정에서 생긴 문제인데 Webpack으로 nodejs server-side 코딩을 하게되면 이렇게 에러가 발생한다.

webpack의 기본 옵션은 front-side로 맞춰줬기 때문이다. 그래서 우리는 하나의 옵션을 설치하고 설정해줘야 한다.

npm install webpack-node-externals --save-dev

그리고 webpack.config.js 이라는 파일을 프로젝트 폴더 바로 아래에 만들고 설정을 아래와 같이 해주자.

webpack.config.js

const nodeExternals = require('webpack-node-externals');

module.exports = {
    target: "node",
    externals: [nodeExternals()]
}

그리고 난뒤에 다시 build를 하게되면

정상적으로 build 된 후 dist 라는 폴더와 그안에 main.js 라는 파일이 생성된 것을 확인 할 수 있다.

여기서 집고 넘어 가야할 Webpack 의 Output 개념

• Output

entry에서 설정한 파일을 시작으로 의존되어 있는 모든 모듈을 하나로 묶고 번들링된 결과 와 위치 를 뜻하며

Webpack4 부터 따로 output을 설정하지 않아도 dist 라는 폴더 안에 main.js 의 파일로 번들을 자동 생성한다.

main.js 코드들 확인해보면 우리는 또 하나 상기 시켜볼 수 있다.

"

ES5로 변환 되었다는 것과 우리가 준비사항으로 만든 코드는 ES6 이었다는 점

자동적으로 ES6에서 ES5로 변환이 되었고 그것을 main.js 하나의 파일로 담을 수 있게 되었다.

그전 Babel을 사용할때 nodemon 으로 서버 실행시켰지만 이젠 node 명령어로 main.js 실행이 가능하다.

"

만약 entry 와 output 을 다르게 설정하고 싶다면 webpack.config.js 파일을 아래와 같이 수정해주면 된다.

webpack.config.js 

const nodeExternals = require('webpack-node-externals');
const path = require('path');

module.exports = {
    target: "node",
    externals: [nodeExternals()],
    entry : './src',  // entry 경로 수정
    output: {
        path: path.resolve(__dirname, 'dist'), // output 경로 수정
        filename: "main.js", // output 파일명 수정
    }
}

https://gompro.postype.com/post/1699968

https://poiemaweb.com/es6-babel

http://blog.jeonghwan.net/js/2017/05/15/webpack.html

https://www.zerocho.com/category/Webpack/post/58aa916d745ca90018e5301d