웹팩 설치하기

: 웹팩을 설치하기 위해서는 진행중인 프로젝트를 Node.js의 패키지 프로젝트로 만들 필요가 있다.

1) 현재 디렉토리를 Node.js의 프로젝트 폴더로 선언하기

npm init

2) 엔터를 치고 넘어가면 `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 실행 후

Author And Source

이 문제에 관하여(3. 웹팩의 도입), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@minbok/3.-웹팩의-도입

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다

3. 웹팩의 도입