웹팩은 코드를 묶어서 임포트를 덜 할 수 있게 해준다.
최적화해서 적은 코드를 다운받게 해준다.
빌드 단계를 쉽게 추가할 수 있다.
ts-loader, typescript, webpack, webpack-cli, webpack-dev-server 를 설치하자.
webpack-cli 는 webpack 명령어를 사용하기 위해.
webpack-dev-server는 개발 서버 내에서 빌드하기 위해, 변경사항이 있을 때 재컴파일한다.
ts-loader은 webpack에게 어떻게 코드를 js로 변환할지 전달, tsconfig를 확인.
tsconfig
"rootDir" 설정이 이제 필요가 없다.
웹팩이 루트 파일 위치를 설정할 것이다.
웹팩에서는 .js 등 확장자가 필요가 없다, 설정에 따라 확장자를 찾을 것이기 때문.
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']
}
};webpack 명령어를 입력하면 dist 폴더에 bundle.js 파일이 빌드된 것을 확인할 수 있다.
lite-server로 실행 후 크롬 개발자모드 네트워크 탭에서 bundle.js 파일 하나만으로 작동시킬 수 있다.
웹팩 데브 서버 모드에서 번들은 메모리에만 생성된다.
데브 서버에 의해 로드되지만 dist 폴더에는 없다.
이제 lite-server 가 아닌 webpack-dev-server로 파일 수정시 자동 빌드 후 실행할 수 있도록 해보자.
webpack.config.js 설정에서
output: {
publicPath: "dist"
},publicPath 지정해줘야 dist의 js 파일에 접근할 수 있다.
개발 모드와 배포 모드를 나누자.
webpack.config.js 에서 mode: "development" 설정하고
배포 모드 설정을 따로 할 수 있도록 webpack.config.prod.js 를 따로 만들자.
mode: "production"
배포 모드는 웹팩이 최적화, 코드 경량화를 적용시킨다.
배포 모드는 소스맵이 필요하지 않으니 devtool: 'none' 으로 설정한다. (에러 발생해서 'eval'로 함)
clean-webpack-plugin 를 설치한다. (재빌드할 때마다 dist 폴더는 비워준다.)
