웹팩 같은 경우는••• 이전에 한번 포스팅을 한적이 있었는데요, 웹팩에 대한 내용을 포스팅한거라기보다는 모듈에 대해서 포스팅한 적이 있었습니다. ESMAScript에서 표준으로 채택된 모듈방식은 import export 이고, node.js환경에서 쓰이는 모듈방식은 CommonJS방식이었죠. 그래서 require, module.export 방식이었습니다.
[48장 모듈]
● 모듈의 일반적인 의미 모듈이란 무엇인가? 우리가 어떤 문제를 해결할 때, 막상 문제에 도전한다면 해결하기 어려울 것이다. 하지만 문제를 쪼개어 하나씩 해결한다면 조금 더 쉬울 것이다.
ddaeunbb.tistory.com
기본적인 이런 사항만 일단 알아두고 웹팩에 대해 알아봅시다.
● Webpack 이란?
이전에 모듈방식이 지원되기 전에는 여러개의 자바스크립트 파일을 나누어서 만든다 하더라도 전역을 공유하고 있기때문에, 전역이 오염되기 쉬웠었습니다.
먼저 새로운 디렉토리 파일을 만들고, npm init -y를 해줍니다.
저는 sample이라는 파일을 만들고 npm init을 해주었습니다.
그뒤에 src폴더를 만들고 app.js 와 math.js파일을 생성해주었습니다.
경로 : src
math.js
function sum(a, b){
return a + b;
}
app.js
console.log(sum(1,2))그러고 최상단 에서 index.html 파일을 만들고 두 파일을 불러왔습니다.
index.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="./src/app.js"></script>
<script src="./src/math.js"></script>
</body>
</html>다음 브라우저로 index.html을 열어줍니다.
open index.html그럼 브라우저의 콘솔에 3이 찍히게됩니다.
이처럼, 전역이 공유되기때문에 매번 변수명도 신경써서 지정해줘야하고, 오염되지 않게 신경써야했습니다.
이에따라 나온것이 IIFE라는 방안을 통해 해결하긴 했지만, 이 방법도 문제가 있곤했읍니다.
그뒤로 브라우저에서 모듈을 지원하기 시작하면서 (ES2015) import, export 로 문법으로 해결되기 시작했습니다. 하지만 너무 많은 자바스크립트 파일을 관리하기 어려워지게되었고 또 매번 클라이언트가 서버로 js파일을 요청할때마다 여러개의 자바스크립트 파일을 보내주어야하니 이는 효율적이지 못했습니다. 또한 모듈간의 의존성의 문제도 있었습니다. 따라서 자바스크립트 파일을 하나로 만들어주는 웹팩의 필요성이 대두됩니다.
즉, 웹팩은 여러 모듈들을 하나의 번들로 만들어주어 여러 문제를 해결해줄 수 있는 번들러 입니다.
● Webpack 설치하기
npm i -D webpack webpack-cli웹팩과 웹팩을 터미널에서 실행시킬 수 있는 패키지를 설치해줍니다.
웹팩은 필수적인 옵션 3가지가 있습니다.
npx webpack --help를 실행하면, 옵션들을 확인할 수 있습니다.
- entry : 어떤 파일이 진입점인지
- output : 하나로 합쳐진 파일을 어디에 둘건지
- mode : 어떤 환경에서 쓰일 것인지 (개발, production, none)
먼저 의존성을 만들어주기 위해, app.js를 수정해주자.
import * as math from './math'
console.log(math.sum(1,2));
그다음 아래와 같은 명령어를 실행해보자
node_modules/.bin/webpack --mode development --entry ./src/app.js --output-path dist/main.js그럼 dist 폴더안에 main.js 파일이 있다.
이 main.js파일이 번들링된 파일이라고 생각할 수 있겠다.
그 다음 index.html에서 스크립트 부분을 수정해준다.
index.html
<script src="dist/main.js/"></script>
브라우저에서 잘돌아가는걸 확인할 수 있다.
근데, 문제는 매번 번들링 할때마다 저런 cli를 적을 수 없다.. 기찮다. 따라서 기본 설정을 config파일로 해줄 수 있다.
따라서 프로젝트 최상단에 webpack.config.js를 만들어주자.
웹팩 또한 node.js 환경을 기반으로 돌아가는 것이기 때문에 module.export를 사용해준다.
webpack.config.js
const path = require('path');
module.exports = {
mode : 'developement',
entry : {
main : './src/app.js'
},
output : {
path : path.resolve('./dist'),
filename : '[name].js'
}
}- mode를 설정해줍니다.
- 다음으로 entry 포인트를 지정해주는데, 객체로 열여서 여러개의 엔트리 포인트를 설정할 수도 있습니다.
- 다음으로는 outpu을 설정해주는데, 절대경로를 입력해주는 path라는 모듈을 가져와 사용합니다.
- filename은 [name]으로 설정해주었습니다. 이는 엔트리포인트가 여러개 있을 수 있기 때문에 entry 포인트의 이름에 맞게 아웃풋의 이름이 설정됩니다. 코드에서는 main.js 가 설정됩니다.
const path = require('path');
module.exports = {
mode : 'developement',
entry : {
main1 : './src/app.js'
main2 : ~~
},
output : {
path : path.resolve('./dist'),
filename : '[name].js'
}
}만약 엔트리 포인트가 저렇게 되어있었다면 아웃풋이 main1.js main2.js이런식으로 설정 가능함다.
번들링하기전에, package.json파일로 가서 스크립트 프로퍼티에 build를 추가해줍니다.
package.json
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build" : "webpack"
},다음 아래 명령어를 실행합니다.
npm run build
