Webpack 3회차 - 웹팩의 도입

Lee·2021년 4월 15일

Webpack

목록 보기

3/6

https://youtu.be/t1efxfi_nu8

웹팩 준비

웹팩을 도입함으로써 얻을 수 있는 것은 리팩토링이다.

웹팩을 설치하기 위해서는 흩어진 파일들을 node.js의 패키지 파일로 만들어줄 필요가 있다.

Node.js는 Node.js 홈페이지에서 설치 가능하고 설치하면 NPM(Node Package Manager)을 사용할 수 있다.

현재 디렉토리를 Node.js의 프로젝트로 선언하는 명령어는 npm init이다. 터미널에 npm init을 입력하자.

npm init을 마치면 package.json 파일이 생성되고 이 파일에는 해당 프로젝트에 대한 설명이 적혀있다.

npm install -D webpack webpack-cli
(애플리케이션 자체를 위한 것이 아니라 개발을 위한 것들은 -D 옵션을 이용하여 설치한다)

설치를 마치면 package.json의 내용중

"devDependencies":{
	"webpack": "^~~~",
    "webpack-cli": "^~~~~"
}

위 처럼 이 프로젝트에는 webpack과 webpack-cli가 필요하다는 의미이다.

node_modules 폴더를 살펴보면 webpack 폴더와 webpack-cli 폴더를 확인할 수 있다.

웹팩 시작

html의 script 안쪽의 JavaScript 코드는 별도의 JS파일로 옮기고 html의 빈 script 태그는 삭제한다.

//index.js 파일 생성

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

index.js 라는 파일은 hello.js와 world.js를 사용하고 있다.
index.js는 우리가 만들고 있는 애플리케이션의 입구에 해당하는 파일이고 이를 엔트리 파일이라고 한다.

웹팩을 이용해서 이 index.js 파일이 사용하고 있는 hello.js 파일과 world.js 파일을 index.js 파일에 번들링 해보자.

이 번들링 된 파일은 public 이라는 폴더 안에 넣는다.

번들링

프로젝트 안에 설치된 웹팩을 실행할 때는 npx를 쓴다.

번들링 명령어

npx webpack --entry ./source/index.js --output-path ./public --output-filename index_bundle.js

npx webpack: 웹팩아

--entry 경로/파일명: 내가 작업중인 프로젝트에서 입구(entry)에 해당되는 파일은 ~경로에 있는 파일명이야

--output-path 경로: 그 엔트리파일과 엔트리파일이 사용하고 있는 모든 파일들을 하나로 합쳐서 ~경로에

--output-filename 파일명: 파일명으로 보내줘

npx webpack --entry ./source/index.js --output-path ./public --output-filename index_bundle.js

위 명령어를 실행하면 public 폴더에 index_bundle.js 라는 파일이 생긴 것을 볼 수 있다.

이 번들링 된 파일을 index.html의 body 부분에 script태그로 넣으면(모듈 타입 쓸 필요 없음) index.js에서 hello.js와 world.js를 불러와 출력하던 결과를 똑같이 보여준다!

<html>
    <head>
        <!--<script src="./surce/hello.js"></script>
        <script src="./source/world.js"></script>-->
    </head>
    <body>
        <h1>Hello, Webpack</h1>
        <div id="root"></div>
        <script src="./public/index_bundle.js"></script>
    </body>
</html>