JavaScript는 웹 개발자에게 브라우저에서 직접 코드를 실행하고 동적인 대화형 웹 사이트를 구축할 수 있는 능력을 제공한다는 목표 로 탄생하였습니다. 지금까지 JavaScript는 많은 성장을 하였습니다. 처음 JavaScript가 매우 간단하고 제한된 언어 였다면 오늘날에는 거의 모든 종류의 애플리케이션을 빌드하기 위해 브라우저 외부에서도 사용할 수 있는 완전한 범용 언어 로 간주될 수 있습니다. 실제로 JavaScript는 이제 프론트엔드 애플리케이션, 엡 서버 및 모바일 애플리케이션은 물론 웨어러블 장치, 온도 조절기, 비행드론과 같은 임베디드 장치를 지원하고 있습니다.
새로운 추세에 JavaScript 개발자들은 동일한 프로젝트의 여러 환경에서 코드를 재사용하고 단순화 시킬 필요 가 있다고 생각하였습니다. Node.js를 사용하면 개발자는 서버와 브라우저 간에 코드를 쉽게 공유할 수 있는 웹 애플리케이션을 만들 수 있습니다.
서버와 클라이언트 간의 일부 코드를 공유하고 싶을 때 가장 먼저 부딪히는 장벽이 Node.js에서 사용하는 모듈 시스템과 브라우저에서 사용하는 모듈 시스템의 이기종 환경 간의 불일치 입니다. 또한 브라우저에는 require() 함수나 모듈을 해결할 수 있는 파일 시스템이 없다는 점도 명시해야 합니다. 이러한 문제점들을 해결해 주는 것이 모듈 번들러 입니다.
모듈 번들러는 서버와 브라우저 모두에서 최대한 원활하게 작동할 수 있는 코드의 상당부분을 빌드 시 모든 종속성과 함께 번들하는데 도움을 주는 도구입니다. 종속성을 해결하고, 모듈맵을 가져와서 실행 가능한 번들 파일로 패킹해주는 대표적인 모듈 번들러 웹팩을 배워보도록 하겠습니다.
먼저 CLI 상에서의 웹팩의 실행법을 이해하고, 웹팩의 Config파일을 통해 추가기능 사항들을 알아보도록 하겠습니다.
# Contents
- CLI 에서의 기본적인 웹팩 실행법
- Config를 이용한 웹팩 사용법
# CLI 에서의 기본적인 웹팩 실행법
웹팩의 사용법은 공식사이트인 https://webpack.kr/guides/getting-started/ 를 참고하였습니다.
Getting Started | 웹팩
Learn how to bundle a JavaScript application with webpack 5.
webpack.kr
1. 프로젝트 생성
먼저 웹팩을 이용하기 전에 Node.js 프로젝트를 생성해야 합니다. Node.js 프로젝트를 생성하시려면 Node.js 가 설치되어 있어야 하겠죠?? 웹팩은 최소 Node.js 버전은 10.13.0(LTS) 이라고 합니다. 자신의 노드 버전을 확인하여 지원안되는 버전이라고 생각하시면 업그레이드를 해 주시기 바랍니다.
아래 명령어를 통해 프로젝트를 생성합니다.
mkdir webpack-demo
cd webpack-demo
npm init -y
npm install webpack webpack-cli lodash --save-dev
위 명령어를 통해 프로젝트의 생성과 동시에 웹팩에 필요한 모듈도 설치가 되었습니다. 생성된 프로젝트에서 기본적인 자바스크립트 코드를 사용하여 테스트를 진행해 볼 예정입니다.
다음 코드를 src/index.js 에 입력하시기 바랍니다.
const message = document.createTextNode("Webpack Example");
document.body.appendChild(message);
그리고 아래 HTML을 생성하여 위에서 생성한 자바스크립트 코드를 넣어주도록 합시다. 그러면 Body 태그 제일 끝에 TextNode가 생성되어 Webpack Example이라는 내용이 적용될 것입니다.
아래 코드를 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></body>
<script src="src/index.js"></script>
</html>
해당 결과 내용은 아래와 같습니다. 일반 브라우저에서는 import 모듈을 사용할 수 없음을 확인하실 수 있습니다.
2. 모듈 번들러 웹팩 사용
일반 브라우저에서는 import 구문을 사용하지 못한다는 것에 대해 이해하였습니다. 웹팩을 사용하여 import/export 를 적용 하여 브라우저와 서버와의 다른 환경에서 구문이 동일한 상황이라도 수정하지 않고 적용해보도록 하겠습니다.
아래 명령어를 통해 모듈을 번들해봅시다.
npx webpack
해당 명령어를 사용하게 되면 웹팩에 관련된 로그들과 함께 성공적으로 번들하여 패킹된 파일이 dist 폴더에 나오게 됩니다.
main이라는 파일이 나오게 되면 index.html 에서 정의했던 자바스크립트를 dist/main.js로 변경하여 실행 시켜 주세요. 그러면 우리가 출력하고자 하는 내용들이 정상적으로 출력됩니다.
우린 성공적으로 웹팩을 사용하여 import 구문을 브라우저에서도 적용시켜 보았습니다. 지금 예제는 아주 간단하고 기초적인 예제로써 웹팩의 부가적인 기능은 Config 파일을 정의하여 추가시킬 수 있는데요. 간단하게 적용시키실 개발자님께서는 여기서 마무리해주시고, 추가적인 기능을 원하신다고 생각하시면 아래 글을 읽어주세요.
# Config를 이용한 웹팩 사용법
웹팩을 사용할 때 반드시 설정 파일이 필요하지는 않지만, 대부분의 경우에는 설정 파일을 사용합니다. 왜냐하면 터미널에서 웹팩 커맨드를 실행할 때 마다 모든 옵션들을 붙여주는게 번거롭고, 설정 파일을 소스 저장소에 올려두면 다른 개발자들은 크게 설정이 신경쓰지 않고 협업을 할 수 있기 때문입니다.
웹팩 Config 파일은 Node.js 를 만든 프로젝트에 webpack.config.js 를 생성 해야 합니다.
생성된 webpack.config.js 는 기본적으로 아래 코드를 입력해주세요. 차후 변경될 예정입니다.
module.exports = {};
웹팩 Config 설정은 총 4가지의 분류로 나뉘어지게 됩니다.
- Entry
- Output
- Loader
- Plug-in
1. Entry
먼저 Entry 부터 설명하도록 하겠습니다. 웹팩은 기본적으로 여러개의 자바스크립트 파일을 하나의 파일로 묶어내는 모듈 번들러입니다. 그렇기 때문에 처음 시작점에서 의존된 파일들을 트리로 만들어 묶어 합치기 때문에 최상위의 자바스크립트 파일, 즉 의존성 그래프의 시작점을 Entry 라고 합니다. 이 Entry의 Default 값은 src/index.js 입니다. 파일을 변경하지는 않지만 Config 파일의 적용을 위해 아래 코드를 작성하겠습니다.
webpack.config.js 를 수정해주세요.
module.exports = {
entry: "./src/index.js",
}
수정한 후 번들 실행방법은 아래와 같습니다.
npx webpack
Entry의 추가적인 내용 및 Syntax은 아래 주소를 확인해주세요.
Entry Points | webpack
webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.
webpack.js.org
2. Output
웹팩을 실행시키면 결과 파일이 dist/main.js 로 저장되게 됩니다. Output 에서는 의존된 파일들을 번들하여 패킹한 결과 파일의 저장소 및 파일 이름을 지정하는 역할을 하고 있습니다. Entry 에서는 상대경로로 입력을 했었지만, Output 에서는 절대 경로로 입력을 해야한다는 점에서 유의해주시기 바랍니다. 웹팩을 수행하게 되면 현재 폴더에서의 test.js로 파일을 생성을 하도록 설정하겠습니다.
webpack.config.js 를 수정해주세요.
module.exports = {
entry: "./src/index.js",
output: {
path: __dirname,
filename: "test.js",
},
}
수정한 후 번들 실행방법은 아래와 같습니다.
npx webpack
Output의 추가적인 내용 및 Syntax은 아래 주소를 확인해주세요.
Output | webpack
webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.
webpack.js.org
3. Loader
웹팩은 자바스크립트 뿐만 아니라, Loader를 이용하여 CSS나 이미지, 웹폰트, JSX, VUE 등 다양한 종류의 파일을 함께 번들링할 수 있습니다. 본 예제에서는 가장 자주 사용되는 CSS 파일에 대해서만 설정을 해보겠습니다.
먼저, 웹팩이 CSS 파일을 처리할 수 있게 만들어주는 style-loader와 css-loader 패키지를 설치합니다.
npm install --save-dev style-loader css-loader
그리고 간단한 css 파일과 javascript파일, html 파일을 각각 생성하도록 하겠습니다.
먼저 css 파일입니다. 저는 style/style.css 파일로 생성하고 작성하였습니다.
body {
color: tomato;
}
그리고 javascript 파일입니다. 저는 src/index.js 파일로 생성하고 작성하였습니다.
import "../style/style.css";
const message = document.createTextNode("Webpack Example");
document.body.appendChild(message);
그리고 html 파일입니다. 저는 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></body>
<script src="build.js"></script>
</html>
index.html 파일에서는 script src가 build.js로 지칭 되어 있기 때문에 차후 테스트 진행 시 주의하시기 바랍니다.
그리고 webpack.config.js 를 수정해주세요.
module.exports = {
entry: "./src/index.js",
output: {
path: __dirname,
filename: "build.js",
},
module: {
rules: [
{
test: /\.css$/,
use: ["style-loader", "css-loader"],
},
],
},
}
수정한 후 번들 실행방법은 아래와 같습니다.
npx webpack
Output의 추가적인 내용 및 Syntax은 아래 주소를 확인해주세요.
Loaders | webpack
webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.
webpack.js.org
4. Plug-in
로더가 파일단위로 처리하는 반면 플러그인은 번들된 결과물을 처리하는 역할 을 도와줍니다. 예를 들어 번들된 자바스크립트를 난독화 한다거나 특정 변수를 삽입한다거나, 안쓰는 코드들을 정리할 수 있는 플러그인들이 있습니다.
기초적인 예시로, 특정 변수를 삽입하는 플러그인을 넣어보도록 하겠습니다.
webpack.config.js 를 수정해주세요.
const webpack = require("webpack");
module.exports = {
entry: "./src/index.js",
output: {
path: __dirname,
filename: "build.js",
},
plugins: [
new webpack.DefinePlugin({
APP_NAME: JSON.stringify("My app"),
VERSION: JSON.stringify("v0.1"),
}),
],
};
그리고 간단한 javascript파일, html 파일을 각각 생성하도록 하겠습니다.
먼저 javascript 파일입니다. 저는 src/index.js 파일로 생성하고 작성하였습니다.
console.log(`APP_NAME:`, APP_NAME);
console.log(`VERSION:`, VERSION);
그리고 html 파일입니다. 저는 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></body>
<script src="build.js"></script>
</html>
수정한 후 번들 실행방법은 아래와 같습니다.
npx webpack
Output의 추가적인 내용 및 Syntax은 아래 주소를 확인해주세요.
Plugins | webpack
webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.
webpack.js.org
'오픈소스 > 노드' 카테고리의 다른 글
| [Node] React 프로젝트를 직접 만들어보기 with Babel, Webpack (0) | 2021.10.12 |
|---|---|
| [Node] Webpack 쓸만한 Plugins (0) | 2021.10.12 |
| [Node] PM2 설치 및 사용법 (0) | 2021.10.06 |
| [Node] Audio Raw PCM data 에서 amplitude 추출 (0) | 2021.10.06 |
| [Node] Express 서버에서 Form을 이용하여 여러 개 데이터 전송 (0) | 2021.10.06 |
