Webpack
진행되는 프로젝트의 단점을 찾아볼 수 있다. 이는 HTTP요청 관련한 문제인데
상대적으로 크기가 작지만 이 많은 HTTP 요청들로 인해 베이스 오버헤드(base overhead), 지속(duration)이 발생한다.
실제 파일 다운로드는 비교적 빨리 진행되지만 웹에서 실행하는 경우 요청을 설정하고 서버에 수행되는 것은 시간이 다소 걸리게 되며 결국 프로젝트가 느려질 수 있다.
그러므로 요청의 양을 줄이는 방법으로 웹팩(Webpack)을 이용하여 번들링한다.
원한다면 빌드 단계를 쉽게 추가할 수 있고 개발 서버를 추가할 수 있다.
번들이란 묶고 빌드하고 종합하는 도구이다. 코드를 묶음으로써 HTTP 요청의 양을 줄이는것을 도와주고 여러개 파일에 걸쳐 코드를 나눌 수 있다. 코드를 최적화하고 빌드 절차를 추가하는 등 추가 빌드 툴을 제공한다.
웹팩에는 여러가지 기능이 있지만 타입스크립트에 초점을 맞추어 사용할 기능을 알아보자.
불필요하게 긴 함수 이름등을 줄임으로써 코드를 더 최적화 할 수 있으며 이를 자동으로 작업할 툴이 필요하다. 즉 가능한 짧은 변수 및 함수 이름을 사용해서 간결한 코드를 작게 만들어주는 툴
웹팩을 프로젝트에서 사용하기 위해서는 먼저 컴파일과 현재 개발 서버를 종료해야한다.
개발을 효율적으로 할 수 있게 해주는 써드파티 라이브러리를 설치한다
npm install --save-dev webpack webpack -cli webpack-dev-server typescript ts-loader패키지들의 역할
webpack-cli : 프로젝트에서 웹팩 명령어를 실행하기 위함
webpack-dev-server : 개발 서버 내에서 빌트하기 위함
ts-loader : 웹팩과 함께 동작할 패키지이며 코드를 컴파일하여 어떻게 자바스크립트로 변환할 것인지 전달
tsconfig.json
모듈은 ES2015 혹은 ES6로 설정하며 웹팩을 설정하면 루트 경로는 필요하지 않으니 주석처리한다
"rootDir": "./src" //주석 처리하자webpack.config.js 파일을 추가한다. 이는 웹팩이 자동적으로 인식하고 프로젝트를 어떻게 동작할지 전달해준다.
이 구성파일은 자바스크립트를 사용하며 노드 기능을 사용하기 때문에
module.exports = {};를 작성한다 자바스크립트 오브젝트를 엑스포트 하기 위함
시작 지점(entry point)은 app.ts이며 이 파일이 가장 먼저 실행된다. 이후 웹팩의 역할은 이 파일 내의 임포트항목을 파악하는 것이다.
프로젝트의 모든 파일을 파악할 때 까지 진행되며 이후에는 모든 파일 내용을 파악한다. 이는 ts-loder 패키지를 이용하여 컴파일한다.
여기서 웹팩을 정확하게 동작시키기 위해 모든 임포트에서 모든 .js 확장자를 삭제해야한다. 웹팩은 자동적으로 .js 및 기타 확장자 파일을 찾기 떄문에 지워주지않으면 이중 확장자를 검색하기 때문이다.
app.ts
import { ProjectInput } from './components/project-input;
import { ProjectList } from './components/project-list;등등 project-list, project-item, project-input 등의 임포트도 마찬가지로 .js를 삭제해준다.
webpack.config.js
const path = require('path');
module.exports = {
entry: './src/app.ts', // 진입속성
output: {
filename: 'bundle.js', //출력
path: path.resolve(__dirname, 'dist') //절대경로 지정
}
};./src.app.ts 진입(entry) 속성을 추가 해준다.
출력은(output)은 마지막에 생성되는 단일 자바스크립트 파일을 적어준다.
이후 출력이 쓰여지는 경로를 명시할 것인데, 이는 에러를 방지하기 위해 tsconfig.json 인접 파일 내의 경로와 맞추어야 한다. 그것은 바로 dist 폴더로 ./는 입력하지 않아도 된다.
웹팩은 여기서 절대 경로를 필요로 하기 때문에 node.js 모듈을 이용해 특정 상수 __dirname를 작성하고 dist를 입력해준다.
dist 폴더로 절대 경로를 구축하고 웹팩은 이것을 사용하여 출력한다.
이제 웹팩에게 전달한 파일로 무엇을 할것인지 전달해주자.
const path = require('path');
module.exports = {
entry: './src/app.ts',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.ts$/, //시험 속성
use: 'ts-loader',
exclude: /node_modules/
}
]
},
resolve: {
extensions: ['.ts', '.js']
}
};구성(configuration) 오브젝트에 새로운 진입(entry)를 추가해야 하며
웹팩에게 rules 배열을 추가 전달하여 모든파일에 룰을 적용한다.
test: /\.ts$/ 속성을 추가한다. 이는 룰에 해당 파일이 적용되는지 여부를 알아내기 위함이다. .ts 파일로 끝나는지 점검한다.
ts-loader은 자동적으로 tsconfig.json 파일을 살펴보기 때문에 추가 구성을 입력하지 않아도 된다.
exclude : /node_modules/ 웹팩이 노드 모듈을 찾지 않게 한다.
resolve 키워드를 입력하여 임포트에 추가할 파일 확장자를 웹팩에 전달한다.
ts 파일을 찾고 싶으므로, 여기 resolve에 extensions 속성(property)을 추가하겠습니다.
이것을 배열(array)로 설정하고 웹팩에게 .ts 파일, .js 파일을 찾아야 한다고 알려준다.
이러한 과정들이 번들링이라는 과정이다.
tsconfig
"sourceMap": true로 설정하여 코드의 디버그 지원, 웹팩도 이를 지원하기 때문에 활성화
webpack.config.js
const path = require('path');
module.exports = {
entry: './src/app.ts',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
devtool: 'inline-source-map',
module: {
rules: [
{
test: /\.ts$/,
use: 'ts-loader',
exclude: /node_modules/
}
]
},
resolve: {
extensions: ['.ts', '.js']
}
};devtools를 입력하고 inline-source-map을 문자열(string)로 입력합니다.
이 부분은 기본적으로 생성한 묶음(bundle)을 추출하고 정확하게 접속해야하는
생성된 소스 맵이 이미 존재한다는 것을 웹팩에게 전달한다.
다른 구성(configuration)들로 어떻게 동작할 수 있는지 살펴보려면 index.html 파일로 가서, 임포트를 bundle.js로 수정한다.
<script typ="module" src="dist/app.js"></script>
<script typ="module" src="dist/bundle.js"></script>불필요한 HTTP 문제 해결을 위한 bundle 코드가 완성 되었다.
webpack-dev-server
package.json파일로 가서 lite-server를 webpack-dev-server로 수정한다. 데브서버를 이용하면 dist가 비어있는데도 작동하는것을 알 수 있는데 이는 번들들이 데스 버서에 의해 로드 되어 지지만 dist에 쓰여지지 않고 메모리에만 생성된다. 이를 전달하기 위해서는 webpack.config.js파일에 가서 output에 publicPath를 입력하고 dist 로 설정해야 한다.
개발 모드를 사용할 때, webpack.config.js 에 mode: 'development' 항목을 추가해주면 웹팩에게 우리가 개발을 하기 위한 목적으로 빌드하고 있음을 전달하며 이를 통해 최적화를 덜 진행하고 디버깅을 쉽게하며 의미있는 에러 메세지들을 제공해주게 된다.
