Webpack

모듈을 사용하게 되면 아래의 왼쪽과 같은 모듈간 의존 관계가 발생함. 

모듈관계의 시작점을 통해 관계된 모든 모듈들을 ./dist/main.js 번들링 파일로 만듬.

---

package 설치

> npm install -D webpack webpack-cli

webpack : bundle 작업 실행(모듈로 연결된 스크립트 파일을 하나로 합침(이미지 왼쪽))

webpack-cli : webpack을 터미널 명령으로 사용할 수 있게 함.

---

실행파일(bundle file) 선언

<!-- index.html -->
...
	<script src="dist/main.js"></script>
...

---

webpack option

--mode : "development" 개발환경의 정보를 추가, "Production" 운영에 배포하기 위한 최적화 설정

--entry : 모듈의 시작점 지정

--output : 웹팩의 모든 모듈을 합치고 결과를 저장하는 위치 지정

(webpack --help 명령으로 옵션 확인 가능)

 

터미널에서 webpack 설정

> .\node_modules\.bin\webpack --mode development --entry ./src/app.js --output-path dist/main.js

./node_modules/.bin/webpack : webpack 실행

--mode development : 개발용 환경 설정 지정

--entry ./src/app.js : app.js를 시작점으로 연결된 모듈들을 탐색

--output-path dist/main.js : bundle된 코드를 dist위치의 main.js 파일로 만듬. 

 

webpack.config.js에서 설정

// webpack.config.js
const path = require("path");

module.exports = {
  mode: "edevelopment",
  entry: {		//bundle의 시작점 설정
    main: "./src/app.js",
  },
  output: {		//bundle된 파일의 저장 위치 지정
    path: path.resolve("./dist"),
    filename: "[name].js",
    //name이 'main'(entry에 선언된 이름)으로 치환됨.
    //[name] : entry가 여러개 선언되었을 경우 동적으로 사용할 수 있음.
  },
};

---

실행

package.json에 아래와 같이 설정하면

> npm run build

명령으로 webpack을 실행시킬 수 있음.(webpack.config.js의 설정으로 실행됨)

//package.json
{
 ...
 "script":{
 	...,
    "build": "webpack"
 }
}