우선, webpack 을 공부하게 된 것은 Three.js 패키지를 사용하기 위함이었다. 하지만 React를 구동할 때도 사용되는 것을 알게되고 공부할 필요성을 느꼈다. 공식문서를 참고해서 정리하였다.
Why webpack module?
webpack
정적 모듈 번들러이다. JS 모듈을 컴파일할 때 사용됨.
bundler
여러 파일을 브라우저에서 로딩하는 것은 네트워크 비용 측면에서 부담이 크다. 이에, 여러개의 assets (js, css, png, jpg) 를 웹브라우저가 이해할 수 있는 번들로 묶고 패킹할 수 잇는 번들러 기술이 소개된다.
이제서야, 2가지가 이해되었다.
React 개발 시 package.json "scripts" 에서 npm start 와 같은 키워드를 사용하지 않는지,
"start": "react-scripts start",왜 크롬 개발자 도구 > [Source] 에서 파일 구조가 예상과 다른지 말이다.
Getting Started
It is core Node.js module that gets used to mainipulate webpack
(2021.01.09 기준) webpack 5 runs on Node.js version 10.13.0 + 이므로, npm 프로젝트 생성 후 모듈 설치.
$ mkdir project_name
$ cd project_name
$ npm init -y
$ npm install webpack webpack-cli --save-dev
기본 파일 생성하기
아래 이미지와 같은 구조로 src/index.js , index.html, webpack.config.js 파일을 만들고, 소스코드를 붙여넣는다. (더보기란 참고)
src/index.js
import _ from 'lodash';
function component() {
const element = document.createElement('div');
// Lodash, currently included via a script, is required for this line to work
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
return element;
}
document.body.appendChild(component());dist/index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Getting Started</title>
<script src="https://unpkg.com/lodash@4.17.20"></script>
</head>
<body>
<script src="./src/index.js"></script>
</body>
</html>webpack.config.js
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist'),
},
};
package.json 설정
안전한 배포를 위해 set private true 및 script 키워드 추가
{
"name": "project",
"version": "1.0.0",
"description": "",
// 주석은 지우세요!
// "main": "index.js",
"private":true, // 배포시 dependency 보호
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack" // 이거 추가
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^5.12.1",
"webpack-cli": "^4.3.1",
"lodash": "^4.17.20"
}
}
Creating a Bundle
파일 구조 이해하기
"sorce" code ( ./src ) is the code that we'll and edit.
"distribution" code ( ./dist ) is the eventually be loaded in the browser.
Start Bundle
실습 시작 전에, index.js 에는 loadash라는 외부 모듈을 import 하고 있다. (평소에는 require & exports 문법을 썼는데, webpack 을 사용할 때는 import 문법을 쓰는 듯 하다 ! ) 그러므로, 우선, 패키지 설치를 해주자! (여기서 응용을 한다면, 자신이 사용하고 싶은 외부 모듈을 ( ex Three.js ) 설치 및 import 하고 진행 하면 된다. 외부 모듈 import 하기 위해서 webpack 과 같은 번들러의 존재 이유를 이해하는 순간이다. )
$ npm install lodash // 혹은 three 와 같은 외부 모듈 설치하면 됨!그리고, 아래 명령어로 실행하면 dist/main.js 파일이 생성된다.
$ npx webpack
dist / main.js 파일은 이미 index.html 파일에 <script> 태그로 import 되어있다. 우리는 live server 로 index.html 을 열기만 하면된다! 이미 main.js 에 dependency 및 여러 파일이 번들링된 정보가 녹아져있기 때문이다. 보너스 이미지로 dist / main.js 파일 내부는 이렇게 적혀있다. ( 그냥, 번들링 파일은 복잡스럽구나 하고 넘기면 될 듯하다. 그리고, 이는 크롬 개발자도구 창에서 우리의 정확한 파일 구조를 체크하지 못하는 이유이기도 하다. )
live server로 dist / index.html 파일 열기
그런데, 여기서 드는 의문이 있을 것이다. 도대체 webpack 은 무슨 파일을 번들링한 것일까? 바로 src / index.js 파일이다. 그 설정은 사전에 생성한 webpack.config.js 파일에 되어있다.
Using a Configuration
webpack.config.js 파일
간단한 프로그램은 기존 설정대로 진행하면 되지만, 좀 더 복잡한 파일 구조를 설정하기 위해서 파일 내용을 이해해보자.
const path = require('path');
module.exports = {
entry: './src/index.js', // 의존성 그래프의 시작점!! -> 이 파일이 실행된거임.
output: {
filename: 'main.js', // 번들링 결과물로써 dist 파일 내부에 생성되고, index.html에 import 됨.
path: path.resolve(__dirname, 'dist'),
},
};
그리고 새로 정의한 설정 파일을 update 해준다.
$ npx webpack --config webpack.config.js
Watch and WatchOptions
node.js 서버 개발 시 nodemon 과 같은 실시간으로 수정사항을 감지하는 패키지가 문득 그리워진다면? 이 옵션을 고려하라.
webpack.config.js 파일에서 watch 옵션만 추가하거나
const path = require('path');
module.exports = {
//...
watch: true
};
package.json "script" 정의할 때 "--watch" 옵션을 넣어준다.
"build" : "webpack --watch"'1️⃣ 개발 지식 A+ > FE' 카테고리의 다른 글
| how to show cookie headers at client (0) | 2021.01.20 |
|---|---|
| [반응형 웹] #1. 미디어 쿼리 (0) | 2021.01.09 |
| React 공식문서 쉽게 공부하기 (0) | 2021.01.02 |
| [JS] 비동기 동작 스케줄링 방법 3가지 (0) | 2020.12.22 |
| [JS] 객체 지향 프로그램 (0) | 2020.12.10 |
