📌 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
|
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
|
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
|
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
|
{
"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
|
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
|
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
|
{
"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>
|
댓글 공유