webpack 이란?
- 모듈 번들러(module bundler)
- 흩어져 있는 여러개의 js, css, image 등 자원을 하나의 파일로 번들링하여 웹에서 로딩할 수 있도록 도움을 주는 도구
Nodejs위에서 돌아감.
- 의존성 관리 : 의존하는 모듈들의 로딩 순서 자동 관리
- 로더 : 다양한 파일 형식을 모듈로 변환
- 플러그인 : 파일의 사이즈 최적화 및 코드 난독화 등 작업 수행 가능
사전 설치 필요
Nodejs: 서버 사이드에서 javascript 실행할 수 있도록 환경 제공npm(Node Package Manager) : 다양한 라이브러리와 모듈 제공, 최신 스펙 개발 가능, 빌드 및 배포 자동화
webpack을 활용한 개발환경 설정 순서
1) 디렉토리 생성 및 이동
- mkdir pjh-webpack-dev-env-sample
- cd pjh-webpack-dev-env-sample
- js 파일 생성 : /pjh-webpack-dev-env-sample/src/app.js
2) package.json 파일 생성
- npm init
- 최초 생성된
package.json
{
"name": "pjh-webpack-dev-env-sample",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}3) webpack, webpack cli 설치
- npm install -D webpack webpack-cli
- webpack 설치 후 추가된
package.json요소
"devDependencies": {
"webpack": "^5.76.2",
"webpack-cli": "^5.0.1"
}4) package.json 파일 scripts 변경
- 빌드 모듈 webpack 설정
"scripts": {
"build": "webpack"
},5) webpack 설정 파일 생성
- 파일명 :
webpack.config.js- webpack
- 동작을 제어하는 옵션 설정
- 모듈 처리 방법 정의
- 결과물 다양한 방식으로 처리
- webpack
- 필수 옵션 :
mode,entry,output - 파일 위치 : /pjh-webpack-dev-env-sample/webpack.config.js
- 로직 상세 : /src/app.js -> 번들링 -> ./dist/main.js
const path = require("path");
module.exports = {
mode: "development",
entry: {
main: "./src/app.js",
},
output: {
path: path.resolve("./dist"),
filename: "[name].js",
},
};5) npm 실행
- npm run build
- ./dist/main.js 생성 확인
6) 테스트
- index.html 생성 (import ./dist/main.js)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>테스트</title>
</head>
<body>
<div id="app">
<header>
<h2 class="container">테스트</h2>
</header>
<script src='./dist/main.js'></script>
</body>
</html>- open index.html (정상 확인)
참고
- 프로젝트 디렉토리 구조 캡처
- 인프런 인강 - 프론트엔드 개발환경의 이해와 실습
- 버전
Nodejs: v18.12.1npm: v8.19.2
자기 개발 기록 저장소