자바스크립트 파일을 하나로 Webpack이 왜 중요하고 왜 웹팩을 알아야 할까?

2022. 7. 23. 23:58

728x90

웹팩(Webpack)이란?

SPA(Single Page Application) 개발이 많아지면서 자바 스크립트의 코드 분량이 크게 증가하여

초기 단계에서 UI 컴포넌트와 자바스크립트의 코드를 분리하여 작업을 수행하였습니다

그렇게 되면서 개별적인 자바스크립트 파일을 불러와 웹사이트 로딩 속도가 문제가 되었습니다

그래서 그 문제의 해결책으로 자바스크립트 파일을 하나의 js파일로 번들링 작업을 하게 되었고

그렇게 새롭게 등장한 웹팩(Webpack)입니다.

공식 사이트는 오른쪽 사이드바에 등록해놓겠습니다

이러한 과정에서 웹팩(Webpack)은 번들링 작업에서는 필수적인 기능으로 발전하였습니다

요즘은 프로젝트를 생성할 초기에 자동으로 만들어주기때문에

관심이 적어지기도 합니다

하지만 중요하고 어떤 과정으로 웹팩이 작동하는지도

한번알아보는것도 정말 중요한 과정입니다

그럼 설치부터 알아볼까요

웹팩(Webpack) 설치 및 설정

웹팩을 설치하기 위해서는 Node가 필요합니다.

다운로드하는 사이트는 사이드 바에 등록해놓겠습니다

설치 후 아래의 코드를 실행해서

버전을 확인해서 설치유무를 확인해 봅니다

npm -v
node -v

설치가 완료되었으면, 실습용 폴더를 생성한 후

해당 폴더 안에서 npm 초기화 및 웹팩 설치 작업을 진행합니다.

실습용 폴더명 은 webpack을 제외하고,

작성해야 npm 충돌이 일어나지 않는다.

npm init -y 는 package.json 생성 시 모든 기본값을 자동으로 채워줍니다

npm init -y
npm install webpack webpack-cli --save-dev

그리고 package.js 파일에서 script 부분을 수정해 줍니다

{
     "name": "Webpack_Test",
     "version": "1.0.0",
     "description": "",
     "main": "index.js",
     "scripts": {
         "start": "webpack" // 이부분을 수정한다
      },
     "keywords": [],
     "author": "",
     "license": "ISC",
     "devDependencies": {
         "webpack": "^4.44.1",
         "webpack-cli": "^3.3.12"
     }
}

웹팩(Webpack)으로 빌드하기 위해서는 src폴더 안에서 파일 관리가 이루어져야 합니다.

그럼 src 폴더와 index.js 파일을 생성한 다음 아래와 같이 코드를 작성한다

console.log("Hell World");

새로운 dist폴더와 함께 main.js파일이 생성되고 압축된 코드가 작성되어있다.

그리고 그 압축된 코드 안에는 console.log("Hell World");

가 포함되어있는 것을 확인할 수 있습니다

src폴더 안에 있는 파일들을 바탕으로 번들링 작업이 진행된다는 것을 알고 계시면 됩니다

그래서 src안에서 프로젝트 페이지등 작업이 이루어지게 됩니다

다음은 dist폴더 안에 index.html 파일을 아래의 코드를 작성해서 생성합니다

<!doctype html>
<html lang="en">
<head>
 ......
</head>
<body>
 <h1 class="card-title">Card Title</h1>
 <button class="btn-change">버튼 변경</button>
 <script src="main.js"></script>
</body>
</html>

그리고 index.html을 크롬 브라우저로 실핼하게되면

아래와 같은 이미지가 노출되며 콘솔로 hell world가 노출되는 것을

확인할 수 있습니다

이제 모든 준비는 완료되었습니다

webpack을 좀 더 설정해봅시다

webpack.config.js 파일 생성하여 아래 코드를 작성합니다

해당 파일은 모듈이나 플러그인을 관리하는 파일입니다

module.exports = {
 entry: "./src/index.js",
 
 output: {
 filename: "hello.js",
 path: path.resolve(__dirname, "COOODE")
 }
};

entry : 압축시킬 파일
output : 압축한 파일을 관리할 폴더와 파일명
path : 절대 경로 기준을 폴더 생성 ( 이러한 이유로 __dirname을 사용할 수 있음 )
resolve() : 인자로 받은 경로를 하나로 합쳐 문자열 형태로 리턴한다.
__dirname : 현재 경로를 의미

package.json 파일 경로를 기준으로 COOODE 폴더가 생성이 되고,

해당 폴더 안에 만들어진 hello.js 안에는 압축된 형태로 코드가 작성되어있습니다.

아래와 같이 다시 명령을 수정해줍니다

이 작업은 웹팩을 사용할 때 내가 설정한 파일의 기준으로 웹팩을 동작시키겠다는 명령어라고 생각합시다

"scripts": {
 "start": "webpack --config webpack.config.js"
 },

webpack.config.js를 다시 수정합니다

이제는 mode를 추가하며

filename도 우리가 정할수 있습니다

path도 설정이 가능합니다

const path = require("path");

module.exports = {
 mode: "development",
 entry: "./src/index.js",
 output: {
     filename: "main.js",
     path: path.resolve(__dirname, "dist")
 }
}

development : 개발자 모드로 배포할 때 사용합니다

path는 node.js의 함수인 require을 사용합니다

그리고 output 안에 path를 지정할 수 있는데

이것은 번들링 작업을 한 main.js의 파일을 어느 위치에 있는 폴더 안에 넣을것이을 지정할 수 있습니다

path.resolve(__dirname, 폴더명)이 함수는 프로젝트의 절대 경로를 문자열로 가져와

폴더는 dist로 지정하는 것입니다

dist폴더 안에 main.js를 생성 하게됩니다

또 한,

main.js를 확인해보시면 압축이 안되어진 상태일것입니다

그이유는 개발자모드이기 때문입니다

이렇게 웹팩을 설정법을 알아보았습니다

다음에는 CSS파일등은 더욱 많은 것들을 적용해보고

알아보도록 하겠습니다

그럼! 다음 포스팅 봐요!!

우리의 대모험은 끝나지않았습니다!!!

728x90

저작자표시 비영리 변경금지

'IT_Web > Webpack' 카테고리의 다른 글

웹팩(Webpack) - 개발, 운영, 공통 파일 분리하여 관리하는 Webpack-merge 설치 및 활용 (0)	2022.07.28
웹팩 실시간 코드 반영 및 Webpack file-loader 이미지 파일 적용하기 (0)	2022.07.27
웹팩(Webpack) 번들링 파일 자동연결 기능 사용하기(캐시 무효화 문제 해결하기) (0)	2022.07.26
웹팩(Webpack) 번들링 시 캐시 무효화 설정하기 (Cache Busting) (0)	2022.07.25
웹팩(Webpack)의 CSS Loader 설치 및 CSS, SASS 웹팩 설정하기 (0)	2022.07.24

귤귤의 대모험

Category