김정환 님의 견고한 JS 소프트웨어 만들기를 듣고 정리한 게시물입니다.
https://www.inflearn.com/course/tdd-견고한-소프트웨어-만들기
웹팩(=bundler)이란?
webpack is a static module bundler for modern JavaScript applications.
- 여러개의 모듈들을 bundle화해준다. (= 여러 개의 javascript파일들을 1개의 javascript 파일로 만들어준다.)
- bundle화 해주기 때문에 bundler라 불린다.
- 모듈이란?
- 하나의 작은 단위
- 즉시 실행 함수 표현 - IIFE(Immediately Invoked Function Expression)
- 외부에서 안으로 접근하지 못하도록 공간을 격리하여 사용한다.
- 전역 스코프의 오염을 막을 수 있다.
// 일반 함수 사용시 - 전역 스코프 오염가능성 있음(window.sum() 으로 호출 가능)
function sum(a,b) {
return a+b;
}
sum(1,2)
// IIFE 방식
var math = math || {};
(function() {
function sum(a,b) {
return a+b;
}
math.sum = sum;
})();
math.sum(1,2)모듈시스템
: IIFE방식의 모듈화 이외에도 CommonJS, AMD, UMD 와 같은 모듈시스템 을 사용하여 파일별로 모듈을 관리할 수 있다.
CommonJS
- node.js 에서 사용하는 방식
// math.js
exports function sum(a,b) { return a+b;}
// app.js
const sum = require('./math.js');
sum(1,2)AMD(Asynchronous Module Definition)
- 브라우져 환경에서 사용되는 스펙(외부에서 js를 로딩하는 경우 == 비동기로 로딩되는 환경)
UMD(Universal Module Definition)
- CommonJS + AMD
표준 모듈 시스템 (가장 일반적인 방식)
- ES2015에서 발표
- babel + webpack
// math.js
export function sum(a,b) { return a+b;}
// app.js
import * as math from './math.js'
math.sum(1,2);- 크롬에서는 다음과 같이 type에 선언하여 module을 사용할 수 있다.
// CORS 이슈가 생기므로 lite-server로 실행테스트
<script type="module" src="./app.js"></script>하지만 모든브라우저에서 다음과 같은 스타일의 모듈시스템을 지원하지는 않는다.
ex) IE 미지원 🙄🙄🙄
Q. 모든 브라우저에서 module방식을 사용하고 싶다면?
A. 웹팩을 사용하자!
웹팩 사용해보기
위에서 모듈테스트해본 app.js, math.js 로 웹팩의 번들링을 체험해보자!
- 다음과 파일을 생성한다.
// index.html
<!DOCTYPE html>
<html>
<head>
<script type="module" src="./src/app.js"></script>
</head>
<body></body>
</html>
// src/math.js
export function sum(a,b) { return a+b;}
// src/app.js
import * as math from './math.js'
const result = math.sum(1,2);
console.log(result);- 웹팩과 웹팩 cli를 설치하고 (해당 강의에서는 webpack 4버전을 사용했다.) webpack.config.js 파일을 생성한다.
설치를 하면 다음과 같이 node_modules 폴더와 package.json, pacakge-lock.json 파일이 생성된다.
npm init
npm install -D webpack@4 webpack-cli
- webpack 필수옵션
- mode: 실행모드
- entry: 모듈 시작점
- output: 빌드결과물을 저장할 공간
(path: directory, filename: 파일명)
[name] 으로 저장하면 파일명을 동적으로 생성할 수 있다.
(해당 예제에서는 main.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'
}
}package.json
"scripts": {
...,
"build": "webpack"
},node_modules/.bin/webpack --help
webpack 설정을 볼 수 있는 명령어인데 해당 명령어를 입력하면 default 설정파일을 webpack.config.js 로 인식하고 있다는 것을 알 수 있다.
-c, --config <value...> Provide path to a webpack configuration file e.g. ./webpack.config.js.
- build
npm run build- 결과 확인
index.html
<!DOCTYPE html>
<html>
<head>
<!-- module 사용 -->
<!-- <script type="module" src="./src/app.js"></script> -->
<script src="./dist/main.js"></script>
</head>
<body></body>
</html>CORS 이슈가 발생하므로 lite-server 를 사용하여 테스트를 하자.
명령어: npx lite-server
