📌 webpack 이란?

모듈로 관리하는 파일들을 번들링 해주는 툴이다.

🔨 사용방법

명령어 환경 구성

Webpack 모듈 번들러를 명령어 환경에서 사용하기 위해 webpack, webpack-cli를 설치합니다.

1
$npm i -D webpack webpack-cli

번들 명령어 등록

package.json 파일에 webpack 번들링을 수행하는 bundle 명령을 등록합니다.

1
2
3
4
5
6
7
8
9
{
    ...
	"scripts": {
    "webpack:config": "webpack --target=browserslist --entry=./src/main.js --output-path=public",
    "webpack:dev": "npm run webpack:config -- --mode=development",
    "webpack:prod": "npm run webpack:config -- --mode=production"
	},
    ...
}
  • entry 폴더와 output 폴더 경로를 지정해주면 된다.
  • dev는 개발환경 번들링 작업을 위한 명령이고 prod는 배포환경을 위한 번들링 작업이다. prod의 결과물은 배포 최적화되어 있다.
  • target 속성은 어떤 브라우저 환경을 대상으로 번들링할 것인지를 명시해주는 것이다. 프로젝트 루트 위치에 .browserslistrc 파일을 생성한다.
1
2
3
4
> 0.5% in KR
last 2 versions
not dead
ie 11

명령 실행

1
2
3
$npm run webpack:dev

$npm run webpack:prod

🔨 Webpack 구성 파일

기본적인 구성으로도 번들링 훌륭하지만 복잡한 구성을 위해서 구성파일을 별도로 작성해 관리하는 것이 좋습니다.

공통 구성 파일

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// webpack/common.js
import { resolve } from "node:path";

const commonConfig = {
  target: "browserslist",
  entry: {
    main: resolve("src/main.js"),
  },
  output: {
    path: resolve("public"),
    filename: "[name].bundle.js",
  },
};

export default commonConfig;

개발 구성 파일

1
2
3
4
5
6
7
8
9
10
// webpack/dev.js
import { merge } from "webpack-merge";
import commonConfig from "./common.js";

const devConfig = merge(commonConfig, {
  mode: "development",
  devtool: "eval-cheap-source-map",
});

export default devConfig;

빌드 구성 파일

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// webpack/prod.js
import { merge } from "webpack-merge";
import commonConfig from "./common.js";

const prodConfig = merge(commonConfig, {
  mode: "production",
  devtool: false,
  output: {
    ...commonConfig.output,
    filename: "[name].min.js",
  },
});

export default prodConfig;

개발, 빌드 명령 등록

1
2
3
4
5
6
7
// package.json
{
	"scripts": {
    "bundle": "webpack bundle -c webpack/dev.js",
    "build": "webpack build --progress -c webpack/prod.js"
  }
}

이제 기본 webpack 구성이 아닌 직접 생성한 파일을 통해서 번들링 작업을 해줄 수 있다.

🔨 Webpack 개발 서버 구성

Webpack 전용 개발 서버를 구동하기위해 패키지를 설치한다.

1
$npm i -D webpack-dev-server

서버 구성 파일

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// webpack/server.js
const devServer = {
  host: "localhost",
  port: 5000,
  hot: true,
  open: false,
  compress: true,
  liveReload: true,
  static: ["public"],
  historyApiFallback: true,
  client: {
    logging: "info",
    overlay: true,
    reconnect: 3,
  },
  watchFiles: {
    paths: ["src/**/*.*", "public/**/*.*"],
  },
};

export default devServer;

서버 구성 파일 불러오기

개발 환경에서 서버 구성 파일을 불러온다.

1
2
3
4
5
6
7
8
9
10
11
12
// webpack/dev.js
import { merge } from "webpack-merge";
import commonConfig from "./common.js";
import devServer from "./server.js";

const devConfig = merge(commonConfig, {
  mode: "development",
  devtool: "eval-cheap-source-map",
  devServer,
});

export default devConfig;

서버 구동 명령어 등록

1
2
3
4
5
6
7
8
9
10
// package.json
{
  "scripts": {
    "start": "npm run server -- --open",
    "dev": "npm run server",
    "server": "webpack server -c webpack/dev.js",
    "bundle": "webpack bundle -c webpack/dev.js",
    "build": "webpack build -c webpack/prod.js"
  }
}

HTML Entry 수정

1
2
3
4
5
6
7
8
<!DOCTYPE html>
<html lang="ko-KR">
  <head>
    <!-- ... -->
    <script type="module" src="main.bundle.js"></script>
  </head>
  <!-- ... -->
</html>