웹팩의 배경
import/export 구분이 없었던 모듈 이전 상황
math.js
function sum(a, b) {
return a+b;
}app.js
console.log(sum(1, 2));두 자바스크립트 코드를 하나의 HTML파일에 로드해야 실행할 수 있다.
index.html
...
<script src="src/math.js"></script>
<script src="src/app.js"></script>
...단점 : 전역스코프가 오염된다
IIFE 방식의 모듈
IIFE는 즉시 실행 함수 표현으로 함수 스코프를 만들어 외부에서 안으로 접근하지 못하도록 공간을 격리하는 것이다. 스코프 안에서는 자신만의 이름 공간이 존재하므로 스코프 외부와 이름 충돌을 막을 수 있다.
math.js
// IIFE 방식
var math = math || {};
(function () {
function sum(a,b) {
return a+b;
}
math.sum = sum;
})();app.js
// IIFE
console.log(math.sum(1,2));전역에 등록한 'math'라는 이름 공간만 잘 활용하면 된다.
다양한 모듈 스펙
CommonJS : exports 키워드로 모듈을 만들고 require() 함수로 불러 들이는 방식이다. 대표적으로 서버 사이드 플래폼인 Node.js에서 이를 사용한다.
math.js
// CommonJS
exports function sum(a,b) {
return a+b;
}app.js
// CommonJS
const sum = require('./math');
console.log(sum(1,2));AMD(Asynchronous Module Definition)은 비동기로 로딩되는 환경에서 모듈을 사용하는 것이 목표. 주로 브라우저 환경
UMD(Universal Module Definition)는 AMD기반으로 CommonJS 방식까지 지원하는 통합 형태
브라우저의 모듈 지원
ES2015에서 표준 모듈 시스템을 내놓았다.
export/import를 사용한다.
안타깝게도 모든 브라우져에서 모듈 시스템을 지원하지는 않는다.
math.js
//ES2016 표준 모듈
export function sum(a,b) {
return a+b;
}app.js
//ES2016 표준 모듈
import * as math from './math.js';
console.log(math.sum(1,2))index.html
...
<!-- 크롬에서의 사용 방식 -->
<script type="module" src="src/app.js"></script>
...브라우저에 무관하게 모듈 시스템을 사용하고 싶은데, 이를 해결하기 위해 웹팩이 등장한다.
Webpack 설정하기
웹팩은 모듈로 연결된 여러개의 자바스크립트 파일을 하나로 합쳐주는 역할을 한다.
이렇게 하나로 합쳐진 파일을 번들 이라고 한다.
웹팩이 번들을 만드는 번들러 역할을 한다. 보통 웹팩을 번들러 라고도 한다.
번들 작업을 하는 webpack과 웹팩을 터미널 명령어로 사용할 수 있는 webpack-cli를 설치한다.
터미널에서 아래 명령어를 입력한다.
npm install -D webpack webpack-clipackage.json
{
"name": "sample",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "echo \"여기에 빌드 스크립트를 추가합니다\""
},
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^5.73.0",
"webpack-cli": "^4.10.0"
}
}node_modules에 .bin에 설치 파일들이 있는 것을 확인할 수 있다.
웹팩을 실행할 때에는 필수적인 옵션이 3개가 있다.
--mode: 개발환경이냐, 운영환경이냐에 따라 설정
--entry: 모듈의 시작지점을 설정
--output: 엔트리를 통해서 웹팩이 모든 모듈을 하나로 합치고 결과를 저장하는 경로를 설정
터미널에 아래 명령어를 통해 웹팩을 설정한다.
node_modules/.bin/webpack --mode development --entry ./src/app.js --output-path dist/index.html
...
<!-- 크롬에서의 사용 방식 -->
<script src="dist/main.js"></script>
...Webpack config파일 작성하기
웹팩은 이렇게 여러개의 모듈을 하나의 파일로 만들어주는 역할을 한다.
웹팩 설정을 할 때 지금은 3개의 필수인자를 전달했지만
이후에는 꽤 많은 옵션을 설정할 것인다.
매번 명령어를 입력할때 마다 이렇게 긴 옵션을 줄 수 없으니까
웹팩 설정 파일을 하나 만들어보자.
webpack.config.js
const path = require('path');
module.exports = {
mode: 'development',
entry: {
main: './src/app.js',
},
output: {
path: path.resolve('./dist'),
filename: '[name].js'
}
}웹팩 설정을 파일을 실행하기 위해 npm scripts에 등록합니다.
package.json
...
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
},
...
build: 'webpack' : webpack만 설정해도 npm은 현재 프로젝트에 있는 node_modules에서 찾아낸다.
그러면 기본 config파일인 webpack.config.js 파일을 찾아서 읽고 번들링을 할 것이다.
npm run build 명령어를 통해 번들링을 실행해봅시다.
엔트리와 아웃풋 실습
-
실습1) 해당 프로젝트를 웹팩으로 빌드하여 자바스크립트를 로딩하라.
-
실습 전 실행결과
먼저 npm으로 프로젝트를 세팅한다.
npm initwebpack과 webpack-cli를 설치한다
npm install -D webpack webpack-cli웹팩 설정을 하기 위해 webpack.config.js파일을 작성한다.
webpack.config.js
const path = require('path');
module.exports = {
mode: 'development',
entry: {
main: './src/app.js'
},
output: {
path: path.resolve('./dist'),
filename: '[name].js'
}
}mode는 개발환경으로 하기 위해 development로 설정하고
엔트리 포인트는 src폴더에 있는 app.js로 설정한다.
output은 dist폴더에 [name].js로 생성되도록 설정했다.
설정파일을 가지고 번들링을 하기 위해 npm scripts에 스크립트를 등록한다.
package.json
...
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
},
...
이제 npm run build 명령어를 입력하면 번들링이 실행될 것이다.
dist폴더에 모듈 번들링 결과인 main.js가 생성되었다.
이제 index.html에서 main.js를 불러오면 된다.
index.html
...
<!-- TODO: 웹팩으로 빌드한 자바스크립트를 여기에 로딩하세요 -->
<script src="./dist/main.js"></script>
...실행 결과
자바스크립트 파일을 잘 읽고 동작한다.
