❓엔트리와 아웃풋이란?
Webpack은 여러개 파일을 하나의 파일로 합쳐주는 번들러(Bundler)입니다.
하나의 시작점(Entry Point)으로부터 의존적인 모듈을 전부 찾아내서 하나의 결과물로 만들어 냅니다. app.js부터 시작해 math.js 파일을 찾은 뒤에 하나의 파일로 만드는 방식입니다.
🔨 간단히 Webpack으로 번들링 작업을 해봅시다.
번들 작업을 하는 webpack 패키지와 webpack 터미넣 도구인 webpack-cli를 설치합니다.
# -D 옵션은 development 패키지, 즉 개발용 패키지로 설치한다는 의미입니다.
npm install -D webpack webpack-cli
설치가 완료되면 node_modules/.bin 폴더에 실행 가능한 명령어가 몇 개 생깁니다. webpack과 webpack-cli가 있는데 둘 중 하나를 실행하면 됩니다.
# --help 옵션으로 사용방법을 확인할 수 있습니다.
node_modules/.bin/webpack --help
# 많은 옵션들이 나오는데 그중에서 필수 요소들이 아래의 3가지 입니다.
# 1. mode 옵션은 "development", "production", "none" 이 3가지의 값이 올 수 있습니다.
# 개발용 정보를 추가하려면 "development" 옵션을 주고,
# 운영환경을 위한 최적화 설정을 하려면 "production" 옵션을 주면 됩니다.(배포할 때)
--mode
# 2. entry는 여러개로 연결되어 있는 모듈의 시작되는 부분을 의미합니다.
# 문자열이 올 수 있고, 모듈의 시작점을 entry 옵션으로 지정해주면 됩니다.
--entry
# 3. output은 결과를 저장할 곳을 의미합니다.
# webpack이 entry를 통해서 모든 모듈들을 하나로 합치고나서, 그 결과를 저장할 경로가
# 필요한데 output 옵션으로 결과를 저장하고 싶은 경로를 지정해주면 됩니다.
--oupput-path, -o
예시
- 먼저 webpack을 사용해서 번들링을 진행합니다.
# 개발환경으로 시작점을 app.js, 저장할 경로를 dist/main.js로 설정
node_modules/.bin/webpack --mode development --entry ./src/app.js --output-path dist/main.js
- html에 script 태그에 번들링된 파일을 로딩합니다.
<html>
<head>
...
<title>Title</title>
</head>
<body>
<!-- webpack으로 번들링한 파일은 더 이상 type="module" 구문이 필요없습니다. -->
<script src="dist/main.js"></script>
</body>
</html>
- 이렇게 해주면 이제 모든 브라우저에서 돌아가게됩니다.
⚒️ 그러나 매번 긴 명령어를 입력하는 것은 번거로운 일이므로 webpack 설정 파일을 만들어줍니다.
먼저 webpack 설정 파일을 지정해주는 옵션이 뭔지 —help 명령어를 사용해서 찾아봅시다.
# webpack 설정 파일을 지정해주는 옵션은 --config 라는 옵션입니다.
# config 옵션은 문자열이 올 수 있고, 기본값은 webpack.config.js 또는 webpackfile.js 입니다.
# 따로 이름을 설정할 필요가 없다고 생각한다면 기본값에 있는 이름으로 파일을 생성해서 webpack 설정을 해주면 됩니다.
--config
webpack.config.js 파일 작성
// node의 path모듈
const path = require('path');
// node의 모듈 시스템을 기반으로 작성합니다.
module.exports = {
// mode에는 개발환경인지 운영환경인지를 지정합니다.
mode: 'development',
// entry에는 시작점을 지정합니다.(여러개도 입력할 수 있습니다.)
entry: {
main: './src/app.js'
},
output: {
// path에는 output 디렉토리명을 지정합니다.(절대경로로 입력)
path: path.resolve('./dist'), // node의 path모듈을 가져와서 작성
// filename에는 저장할 파일명을 지정합니다.
/**
* [name]처럼 입력하면 이 부분이 entry에서 설정한 key값인 main으로 치환됩니다.
* 이렇게 작성하는 이유는 entry가 여러개일 수도 있는데, 그러면 그에 맞는 output도
* 여러개가 필요합니다. 그럴 때 output 이름을 동적으로 만들어 낼 수 있는 효과가 있습니다.
*/
filename: '[name].js'
}
}
이제 webpack으로 코드를 번들링하는 과정을 npm script에 등록해봅시다.
{
"name": "sample",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
/**
* 이곳에 webpack 명령어를 등록합니다.
* 등록할 때는 그냥 webpack 명령어만 작성해주면 npm이 현재 프로젝트에 있는
* node_modules안에서 webpack 명령어를 찾습니다.
* 이렇게 작성해주면 webpack은 기본 config파일인
* 아까 작성했던 webpack.config.js 파일을 읽어서 번들링 작업을 진행하게 됩니다.
*/
"build": "webpack"
},
"author": "", // 프로젝트 작성자
"license": "ISC",
"dependencies": {},
"devDependencies": {
"webpack": "^4.41.5",
"webpack-cli": "^3.3.10"
}
}'Webpack' 카테고리의 다른 글
| Webpack - 플러그인(Plugin) (0) | 2024.03.10 |
|---|---|
| Webpack - 로더(Loader) (0) | 2024.03.10 |
| Webpack - Webpack이란? (0) | 2024.03.10 |