웹팩을 도입했을 때 얻을 수 있는 효과 => 리팩토링
리팩토링이란?
: 구동되는 방법은 그대로 유지하면서 내부의 코드를 더 효율적으로 바꾸는 행위
웹팩 설치하기
: 웹팩을 설치하기 위해서는 진행중인 프로젝트를 Node.js의 패키지 프로젝트로 만들 필요가 있다.
1) 현재 디렉토리를 Node.js의 프로젝트 폴더로 선언하기
npm init2) 엔터를 치고 넘어가면 package.json이라는 파일이 생성된다.
3) 프로젝트 폴더에 웹팩 설치하기 : webpack과 webpack-cli, 두개의 패키지 설치
npm install -D webpack webpack-cli-D 옵션
: 현재 프로젝트의 애플리케이션 자체를 위한 기능이아니라
개발을 하기 위한 기능들은 -D 옵션을 사용하여 설치한다.
4) "devDependencies" 라는 항목이 package.json에 추가되었다.
"devDependencies": {
"webpack": "^5.71.0",
"webpack-cli": "^4.9.2"
}5) index.html의 js코드를 별도의 js파일로 빼내기 위해 index.js 라는 파일을 만든다.
index.html
<html>
<head>
</head>
<body>
<h1>Hello, Webpack</h1>
<div id="root"></div>
</body>
</html>index.js
import hello_word from "./source/hello.js";
import world_word from "./source/world.js";
document.querySelector('#root').innerHTML = hello_word + ' ' + world_word;index.js는 현재 만들고 있는 애플리케이션의 입구에 해당되는 파일 즉, 엔트리 파일
index.js 파일이 사용하고 있는 hello.js와 world.js까지를 index.js 파일에 번들링을 하고 그 결과는 public이라는 폴더안에 넣을 것이다.
프로젝트 폴더에 설치한 웹팩 실행시키기
강의에서는 아래와 같은 코드를 사용했는데,
npx webpack --entry ./source/index.js --output ./public/index_bundle.js 이런 오류가 발생했다. [webpack-cli] error: unknown option '--output'
해결 방법 01
npx webpack --entry ./source/index.js --output-path ./public/index_bundle.js 이 방법은 public 폴더 내부의 index_bundle.js 폴더 하위에 main.js 파일이 생성되는 방식으로 작동함
해결 방법 02
npx webpack --entry ./source/index.js --output-path ./public/ --output-filename index_bundle.js이 방법은 public 폴더 내부에 index_bundle.js 파일이 생성됨
웹팩의 효용성
index_bundle.js이라는 파일에 모든 기능이 들어있으므로 히나의 파일만 다운받으면 된다.
1) 서버랑 접속할때 커넥션이 한번만 이루어지므로 서버와 사용자 모두에게 이득이다.
동시에 import라는 구 브라우저에서 동작하지 않는 코드를 index_bundle.js에서 알아서 구 브라우저에서도 동작할 수 있도록 변환해주므로 2) 구 버전 브라우저도 지원할 수 있게된다.
Webpack 사용 전
Webpack 실행 후
