개발일기

Webpack 설명 및 예제 본문

Javascript

Webpack 설명 및 예제

Flashback 2021. 10. 3. 16:34
728x90
반응형

1. 웹팩이란?

웹 어플리케이션을 구성하는데 HTML, Javascript, CSS 등의 다양한 자원이 활용된다. 웹 어플리케이션을 구성하다보면 이러한 자원들의 갯수가 많아질 것이다. HTML파일이 10개, Javascript파일이 20개, CSS파일이 15개 등으로 구성이 될 것이다. 이러한 각각의 파일들을 하나의 파일로 병합 및 압축해주는 것을 도와주는 도구가 바로 웹팩이다. 웹팩을 통해 병합 및 압이 완료되면 프로젝트를 구성하는 파일은 HTML 1개, Javascript 1개, CSS 1개로 간단하게 구성되도록 도와준다.

 

1-1. 모듈들을 모아주는 웹팩을 사용하는 이유는?

가장 큰 이유로는 웹 어플리케이션의 로딩속도 개선이다. 하나의 페이지에 연결된 자바스크립트 파일이 많다면 모든 자바스크립트 파일들의 로딩이 완료되어 화면에 보여지기까지는 상당한 시간이 걸린다. 웹팩을 통하여 이 파일들을 병합 및 압축하여 하나의 파일로 만들어주면 사용자가 웹페이지에 접속할 때, 하얀 화면만 바라보며 로딩을 기다리는 시간이 대폭으로 줄어들게 된다. 즉, 로딩속도의 개선이 크기에 웹팩이란 도구를 사용한다.

 

 

2. 웹팩 튜토리얼

0. 필수요소인 nodejs 설치

 

1. package.json 파일 생성

npm init -y
yarn init -y

 

2. 웹팩 관련 라이브러리 설치

npm install webpack webpack-cli -D
yarn add webpack webpack-cli -D

 

3. 현재 폴더에 index.html 파일 생성

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Hello Webpack!!</h1>
</body>
<script src="./index.js"></script>
</html>

 

4. 현재 폴더에 index.js 파일 생성

document.addEventListener("DOMContentLoaded", function () {
  console.log("loading success!");
  const content = document.getElementById("root");
  content.innerHTML = "WebPack Load!";
});

 

5. 현재 폴더에 webpack.config.js 파일 생성

const path = require("path");

module.exports = {
  mode: "production",
  entry: "./",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "build"),
  },
};

 

6. package.json에 scripts부분 추가

{
  "name": "webweb",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "build":"webpack"
  },
  "devDependencies": {
    "webpack": "^5.56.0",
    "webpack-cli": "^4.8.0"
  }
}

 

7. 웹팩 빌드 시작

npm run build
yarn build

빌드를 하게 되면 build라는 폴더가 생기게 된다. 해당 폴더에 bundle.js라는 파일로 압축된 자바스크립트 파일이 생긴 것을 확인할 수 있다.

728x90
반응형

'Javascript' 카테고리의 다른 글

Babel - es5로 변환하는 기초 예제  (0) 2021.10.05
Webpack의 구성요소  (0) 2021.10.03
JWT토큰 생성 및 검증  (0) 2021.08.30
Javascript - var, let, const의 차이  (0) 2021.08.25
쿠키의 활용법  (0) 2021.05.24
'Javascript' Related Articles more
Comments