웹팩을 설치하고 옵션들을 이용해 번들링해보자.
엔트리/아웃풋 실습
우리가 export한 내용을 다른 파일에서 import해서 사용하고, 이런 과정이 반복되면 서로 의존하는 관계가 늘어날 것이다. 웹팩은 이런 여러개의 파일을 하나의 파일로 합쳐주는 번들러(bundler)이다. 하나의 시작점(entry point)으로 부터 의존적인 모듈을 모두 찾아내, 하나의 결과물을 만들어 낸다.
웹팩으로 번들링 작업을 해보기 위해 다음 명령어로 webpack 패키지와 웹팩 터미널 도구인 webpack-cli를 설치한다.
$ npm install -D webpack webpack-cli설치가 완료되면 node_modules/.bin 폴더에 실행 가능한 명령어가 몇 개 생긴다. --help 옵션으로 사용 방법을 확인해보자.
$ node_modules/.bin/webpack --help
--mode Enable production optimizations or development hints.
[선택: "development", "production", "none"]
--entry The entry point(s) of the compilation. [문자열]
--output-path, -o The output path and file for compilation assets--mode, --entry, --output-path 이 3가지 옵션을 사용하면 번들링할 수 있다.
- --mode: 웹팩 실행 모드를 결정 ("development", "production", "none")
- --entry: 모듈의 시작점 경로를 지정
- --output-path: 번들링 결과를 저장할 경로 설정
$ node_modules/.bin/webpack --help
--config Path to the config file
[문자열] [기본: webpack.config.js]--config 옵션은 웹팩 설정파일의 경로를 지정할 수 있는데, 기본 파일명은 webpack.config.js이다. 이 파일을 만들어 위의 3가지 옵션을 코드로 구성해보자.
webpack.config.js
const path = require("path")
module.exports = {
mode: "development",
entry: {
main: "./src/app.js"
},
output: {
filename: "[name].js",
path: path.resolve("./dist")
}
}- output에 설정한 filename의 [name]은 entry에 추가한 main이 문자열로 들어오는 방식이다. 그래서 결과물 파일 이름이 main.js가 되는 것이다.
- output의 path는 절대 경로를 사용하기 때문에 path 모듈의 resolve() 함수를 사용해서 상대 경로를 절대 경로로 바꿔주었다.
이제 웹팩 실행을 위해 NPM 커스텀 명령어 build를 추가해주자.
package.json
{
"scripts": {
"build": "webpack"
}
}모든 옵션을 웹팩 설정 파일로 작성했기 때문에 단순히 webpack 명령어만 실행한다. npm run build 명령어로 웹팩 작업을 지시하면 dist 폴더에 main.js 파일이 생성될 것이다.
그러면 이 파일만 index.html에 잘 넣어주면 모든 브라우저에서 모듈을 사용할 수 있게 되는 것이다.
index.html
<body>
<script src="./dist/main.js"></script>
</body>'웹 공부하기 > Frontend' 카테고리의 다른 글
| [인프런] 프론트엔드 개발환경의 이해와 실습 (플러그인) (0) | 2021.10.12 |
|---|---|
| [인프런] 프론트엔드 개발환경의 이해와 실습 (자주 사용하는 로더) (0) | 2021.10.08 |
| [인프런] 프론트엔드 개발환경의 이해와 실습 (로더) (0) | 2021.10.07 |
| [인프런] 프론트엔드 개발환경의 이해와 실습 (웹팩이 필요한 이유) (0) | 2021.10.05 |
| [인프런] 프론트엔드 개발환경의 이해와 실습 (NPM) (0) | 2021.10.01 |