2. Webpack 도입

Webpack 을 도입했을 때의 효과는 리팩토링이다.

리팩토링이란 구동되는 방법을 그대로 유지하면서 내부의 코드를 더 효율적으로 바꾸는 행위를 이야기한다.

코드의 전체적인 모습을 그대로 유지하면서 구형 브라우저에서 돌릴 수 있으며 여러가지 파일을 하나로 번들링하는 것을 Webpack 을 통해 해보자.

일단 nodejs 서버 프레임웤으로 해당 페이지를 올려보자.

npm init 을 입력해 해당 프로젝트 폴더를 nodejs 초기 설정을 해주고, npm install -D webpack webpack-cli 저 -D 는 개발을하기 위한 옵션이다.

이렇게 2개를 다운받은 후에 src/index.js 파일을 만들어 html 에서 import 했던 구문들을 옮겨주자

// src/index.js
import hello_word from './src/hello.js'; 
import world_word from './src/world.js';
document.querySelector('div#root').innerHTML = hello_word + ' ' + world_word;

즉, 애플리케이션의 입구 역할의 파일을 index.js 로 설정해준것이다. 이것을 엔트리파일 이라고 한다.

index.js 파일이 hello.js 와 world.js 파일을 사용하고 있다. 그러면 이 의존성을 이용해 index.js 로 번들링 해보자. 이 때의 작업한 결과는 public이라는 폴더 안에다가 넣겠다.

위 과정을 진행하기 위해 webpack 을 실행시켜주자.

npx webpack —entry ./src/index.js -—output ./public/index_bundle.js

위 명령어를 쳐주면 된다. 의미는 src/index.js 의 엔트리 파일과 그 파일이 사용하고 잇는 모든 파일들을 하나로 만들어 public/index_bundle.js 에 가져다 놓아라 라는 의미이다.

그러면 public 폴더 밑에 번들화 된 파일이 만들어져 있을 것이다.

그 후 html 파일에 script src 연결해두면 해당 파일 하나만 커넥션해서 받아도 기존의 기능과 동일하게 돌아간다는 것을 확인할 수 있다.

이렇듯 import 를 webpack을 통해 모든 브라우저가 읽을 수 있게 번들링해줄 수 있게 되어 우리는 편하게 코딩해줄 수 있고, 브라우저도 쉽게 코드를 읽게 된, 서로 윈윈했다고 볼 수 있다.