Webpack - 기본 환경
2020. 7. 7. 13:38ㆍ웹/Webpack
환경 요건
웹팩으로 빌드한 자바스크립트 로딩
package.json 생성
npm init
package.json - bulid script 추가
{
"name": "webpack-test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack"
},
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.43.0",
"webpack-cli": "^3.3.12"
}
}
webpack, webpack-cli 설치
-
wepback : Module로 연결된 여러개의 자바스크립트 파일을 하나로 합쳐주는 역할(bundle)
-
webpack-cli : wepback을 터미널 명령어로 사용 할 수 있게 하는 패키지
-
node_modules/.bin 내에 생성됨
npm install webpack webpack-cli -D
webpack.config.js 생성(웹팩 설정 파일) 및 필수 옵션 추가
-
mode : development, production, none 지정, 개발환경/운영환경에 따라 설정
-
entry : 모듈의 시작점
-
output : wepback 결과 경로(bundling 한 결과)
※ wepback.config.js 의 module.export 는 Common.js 모듈 시스템 사용
const path = require("path");
// ES6 모듈 시스템(ESM)이 아니라 노드 모듈 시스템(Common.js)
module.exports = {
mode: "development",
entry: {
main: "./src/app.js",
},
output: {
filename: "[name].js", // 엔트리 포인트가 여러개일 경우 동적으로 이름 생성하기 위함
path: path.resolve("./dist"), // 절대경로
},
};
웹팩 빌드(번들링)
npm run build
테스트
- app.js
import * as math from './math.js'
console.log(math.sum(3, 5));
- math.js
export function sum(a, b) {
return a + b;
}
- index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<h1>Webpack 테스트</h1>
</body>
<!-- Webpack 으로 빌드한 자바스크립트 파일 로딩-->
<script src="./dist/main.js"></script>
</html>
실행결과
'웹 > Webpack' 카테고리의 다른 글
| Loader (0) | 2020.07.09 |
|---|---|
| Module 개념 (0) | 2020.07.07 |
| Webpack 개념 (0) | 2020.07.07 |