<html lang="en">
<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>- src/app.js
function sum(a, b) {
return a + b;
}- src/math.js
console.log(sum(1, 2));
위처럼 자바스크립트에서는 각각 다른 스크립트 파일에서 코드를 작성하더라도 하나의 자바스크립트 파일 내에 있는 것처럼 동작한다.
이렇게 되면 변수들이 겹치거나 오염 되는 문제가 발생하는데, 각각 독립적으로 존재할수 있도록 모듈이 탄생하였다.
ES6 의 모듈을 사용할 수 있도록 ESM이 등장하였고, ESM은 mjs라는 확장자를 사용한다.
<html lang="en">
<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 type="module" src="src/app.mjs"></script>
<script type="module" src="src/math.mjs"></script>
</body>
</html>이런식으로 type = "module" 옵션을 붙여주면 저 각각의 스크립트 파일은 모듈 스코프라는 독립적인 범위를 갖게 되어서 외부에서 참조 할 수 없다.
이럴때 외부 모듈에서 사용할수 있도록 export 키워드를 사용하고, export한 모듈을 불러오기 위해선 import 구문을 사용한다
- app.mjs
export function sum(a, b) {
return a + b;
}- math.js
import { sum } from "./app";
console.log(sum(1, 2)); // 3하지만 이런 ESM (ES6를 이용한 모듈) 방식은, 구형 브라우저에서는 인식할 수 없다.
또한 ESM을 사용하더라도 트랜스파일링이나 번들링은 어차피 필요하다.
이렇게 최신 코드들도 구형 브라우저에서도 작동하도록 하기 위해서, 그리고 여러개의 모듈을 하나의 파일로 합쳐주기 위해서 웹팩과 바벨이 필요하다 .
- Webpack
여러개의 자바스크립트로 이루어진 파일들을 하나의 파일로 묶어주는 역할을 한다.
- 웹팩 시작하기
npm install -D webpack webpack-cliwepack => 번들링 작업을 해주는 메인 패키지
webpack-cli => 터미널에서도 webpack 명령어를 사용할수 있도록 해줌
- src/index.js
function component() {
const element = document.createElement("div");
// 이 라인이 동작하려면 현재 스크립트를 통해 포함된 Lodash가 필요합니다.
element.innerHTML = _.join(["Hello", "webpack"], " ");
return element;
}
document.body.appendChild(component());- index.html
<html>
<head>
<meta charset="utf-8" />
<title>Getting Started</title>
<script src="https://unpkg.com/lodash@4.17.20"></script>
</head>
<body>
<script src="./src/index.js"></script>
</body>
</html>- package.json
{
"name": "webpackbabel",
"version": "1.0.0",
"description": "",
"main": "index.js",
"private": true,
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^5.78.0",
"webpack-cli": "^5.0.1"
}
}하지만 위의 index.html 파일에서 index.js 파일은 위의 스크립트인 lodash 라이브러리에 의존하여 실행되는데, 명시적으로 불러오지 않았기때문에, 의존성을 파악하기 어려운 단점이 있다.
단순히 저 index.js 코드 안에 있는 _ 변수가 있다고 추정할 뿐이다.
또한 의존성을 잃어버리거나, 잘못된 순서로 불러온 경우 오류를 발생시킬수도 있다.
이런 문제들을 해결하기 위해서 webpack을 사용해서 loadsh 라이브러리를 명시적으로 불러오는 것이 좋다.
- 파일 구조 변경
- dist 폴더 => 배포 코드가 들어갈 폴더
- src 폴더 => 소스 코드가 들어갈 폴더
저 loadash 라이브러리를 설치해서 import해서 가져와보자.
npm install --save lodash- index.js 에서 lodash import 해오기
import _ from "lodash";
function component() {
const element = document.createElement("div");
// 이 라인이 동작하려면 현재 스크립트를 통해 포함된 Lodash가 필요합니다.
element.innerHTML = _.join(["Hello", "webpack"], " ");
return element;
}
document.body.appendChild(component());- dist/index.html 코드 변경
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Getting Started</title>
</head>
<body>
<script src="main.js"></script> // npx webpack 명령어로 만들어질 js파일
</body>
</html>- npx webpack 실행
npx webpack --mode=development
dist 파일에 main.js 파일과 main.js.LICENSE.txt 파일이 생성 되었다.
그후에 index.html 파일을 열어보면 index.js 에서 작성했던 코드가 브라우저상에서 띄어진다.
- webpack.config.js 만들어주기
webpack.config.js 파일을 만들어줌으로써 설정을 더 편하게 할수 있도록 해준다.
const path = require("path");
module.exports = {
mode: "development", // 개발모드 설정
entry: "./src/index.js", // 이 안의 코드를 번들링해줌
output: {
filename: "main.js",
path: path.resolve(__dirname, "dist"), // dist폴더에 main.js 파일을 만들어줌
},
};- package.json 에 build script 추가
{
"name": "webpackbabel",
"version": "1.0.0",
"description": "",
"main": "index.js",
"private": true,
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^5.78.0",
"webpack-cli": "^5.0.1"
},
"dependencies": {
"lodash": "^4.17.21"
}
}이제
npx webpack --config webpack.config.js이 명령어가 아닌
npm run build이 명령어를 통해 웹팩을 실행 시킬 수 있다.
