참고용 이전 발행글
2025.03.14 - [FrontEnd] - Node.js, NPM, Webpack 기본 개념 정리
1. Webpack이란?
Webpack(웹팩)은 모듈 번들러(Module Bundler)로,
JavaScript, CSS, 이미지 등의 리소스를 하나의 번들 파일로 묶어 최적화하는 도구다.
Webpack의 주요 기능
코드 번들링 → 여러 개의 파일을 하나로 묶어 네트워크 요청을 줄이고 로딩 속도를 향상
Tree Shaking → 사용하지 않는 코드를 제거하여 최적화된 번들 파일 생성
Hot Module Replacement (HMR) → 코드 변경 시 자동으로 브라우저에서 반영
2. 개발 환경 구성
Webpack을 사용하려면 Node.js와 NPM이 필요하다.
설치 여부를 확인하려면 아래 명령어를 실행
node -v # Node.js 버전 확인
npm -v # NPM 버전 확인
3. 프로젝트 폴더 및 초기화
프로젝트 폴더 생성 및 이동
mkdir webpack-demo
cd webpack-demopackage.json 생성
npm init -ypackage.json은 프로젝트의 의존성을 관리하는 파일이다.
4. 웹팩 및 라이브러리 설치
웹팩 설치
npm install webpack webpack-cli --save-devwebpack-cli는 CLI(Command Line Interface)에서 웹팩을 실행할 수 있도록 도와주는 패키지다.
예제를 위한 Lodash 라이브러리 설치
npm install lodash
5. 웹페이지 파일 구성
index.html 생성
<html>
<head>
<title>Webpack test</title>
</head>
<body>
<script src="dist/main.js"></script>
</body>
</html>웹팩이 생성한 dist/main.js 번들 파일을 로드한다.
src/index.js 생성
mkdir src
touch src/index.jsimport _ from 'lodash';
function component() {
var element = document.createElement('div');
element.innerHTML = _.join(['Hello', 'webpack'], ' ');
return element;
}
document.body.appendChild(component());Lodash를 사용해 "Hello webpack"을 출력하는 코드를 작성
6. 웹팩을 사용하여 번들링
package.json에 빌드 명령어 추가
"scripts": {
"build": "webpack --mode=none"
}웹팩 빌드 실행
npm run build웹팩 빌드 후, 프로젝트 폴더 하위에 dist/main.js가 생성됨.
7. 웹팩 설정 파일 추가
webpack.config.js 생성
touch webpack.config.jsconst path = require('path');
module.exports = {
mode: 'none', // 'development' 또는 'production' 사용 가능
entry: './src/index.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist')
}
};웹팩 설정 파일을 추가하면 매번 npx webpack을 입력하지 않아도된다.
8. 최종 빌드 및 실행
npm run build브라우저에서 실행
npm install -g live-server
live-server
9. 정리
| 과정 | 설명 |
| 1. 환경 설정 | Node.js, NPM 설치 및 프로젝트 폴더 생성 |
| 2. 초기화 | npm init -y 실행하여 package.json 생성 |
| 3. 웹팩 설치 | npm install webpack webpack-cli --save-dev |
| 4. 파일 구성 | index.html, src/index.js 생성 |
| 5. 웹팩 빌드 실행 | npm run build 실행하여 dist/main.js 생성 |
| 6. 웹팩 설정 추가 | webpack.config.js 파일을 추가하여 설정 자동화 |
| 7. 최종 빌드 | npm run build 실행 |
| 8. 브라우저 실행 | live-server 또는 index.html 직접 실행 |
'FrontEnd' 카테고리의 다른 글
| JavaScript DOM 변화 감지, MutationObserver 활용 (+ Vue3 Composition API 예제) (0) | 2025.04.18 |
|---|---|
| Vite vs Webpack 차이점과 선택 기준 (0) | 2025.03.14 |
| Node.js, NPM, Webpack 기본 개념 정리 (0) | 2025.03.14 |
| lodash 사용법 및 유용 기능 총 정리 (0) | 2025.02.05 |
| Axios에서 Config 객체를 활용한 적절한 HTTP 요청 방법 (0) | 2025.02.05 |