?. Webpack이란 무엇이며 왜 필요한가요?
Webpack: 파일을 묶을 수 있는 도구
코드를 번들링하여 HTTP 요청 수를 줄입니다.
코드 최적화(최대한 작게), 빌드 절차 추가 및 추가 빌드 도구 제공.
?. Webpack 및 중요한 종속성 설치
npm install --save-dev webpack webpack-cli webpack-dev-server typescript ts-loader
// --save-dev:모듈을 설치할 때 package.json 내의 devDependencies 항목에 설치한 모듈과 버전을 넣는 것
// 실제 릴리즈시에는 필요없는 모듈의 경우webpack-cli : 프로젝트에서 webpack 명령을 실행합니다.
webpack-server : 개발 서버 내 구축용
Typescript: 각 프로젝트에 대한 TypeScript 사본을 설치하는 것이 유용하다는 것이 입증되었습니다.
ts-loader : Webpack과 함께 작동하며 Webpack에 코드를 JavaScript로 변환하는 방법을 알려주는 패키지입니다.
?. 입력 및 출력 구성
tsconfig.json
너 모듈은 ES2015 또는 ES6로 설정해야 합니다.
b “outDir”: “./dist”
b “sourceMap”: 참
b “스크립트”: {
“build”: “웹 팩”
}
webpack.config.js 파일을 생성합니다.
const path = require('path');
module.exports = {
// node.js에서 export하는 방법
mode: 'development',
// 웹팩에게 여기서 우리가 개발을 하려고 빌드하고 있음을 전달
// 'production'으로 하면 웹팩에세 최적화, 코드 경령화 등을 지시하는 것
entry: ./src/app.ts,
// 어느 파일에서 프로젝트가 시작하는지
output: {
// 마지막에 생성되는 단일 자바스크립트 파일이 될 것
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
// dist 폴더로의 절대 경로를 구축하고, 웹팩은 그것을 사용해서 출력을 쓰게 된다.
publicPath: 'dist'
// webpack-dev-server 사용햐기 위한 설정
},
devtool: 'inline-source-map',
module: {
rules: {
// 다양한 파일 관련 규칙들을 추가할 수 있다.
{
test: /\.ts$/,
// 이 규칙이 해당 파일에 적용되는지 여부를 알아내기 위해 찾은 파일에 대해 수행할 시험
// 웹팩에게 .ts로 끝나는 파일들을 점검하도록 한다.
use: 'ts-loader',
// 웹팩이 이 파일로 무엇을 하는지
exclude: /node_modules/
// 웹팩이 노드 모듈을 찾지 않는다.
}
}
}
resolve: {
extensions: ('.ts', '.js')
// 웹팩에게 .ts파일, .js파일을 찾아야 한다고 알려준다.
}
};
?. webpack-dev-server 추가
“start”: “webpack-dev-server”를 package.json으로 변경합니다.
코드에서 무언가를 변경하면 자동으로 다시 컴파일되지만 번들은 메모리에만 내장됩니다.
dist 폴더에 연결하려면 webpack.config.js 출력에 PublicPath를 추가해야 합니다.
?. 생산 워크플로 추가
1⃣ wevpack.config.prod.js 파일 생성
const path = require('path');
const CleanPlugin = require('clean-webpack-plugin');
module.exports = {
// node.js에서 export하는 방법
mode: 'production',
// 'production'으로 하면 웹팩에세 최적화, 코드 경령화 등을 지시하는 것
entry: ./src/app.ts,
// 어느 파일에서 프로젝트가 시작하는지
output: {
// 마지막에 생성되는 단일 자바스크립트 파일이 될 것
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
// dist 폴더로의 절대 경로를 구축하고, 웹팩은 그것을 사용해서 출력을 쓰게 된다.
},
devtool: none,
// 프로덕션 모드에서는 소스맵을 생성할 필요가 없다.
module: {
rules: {
// 다양한 파일 관련 규칙들을 추가할 수 있다.
{
test: /\.ts$/,
// 이 규칙이 해당 파일에 적용되는지 여부를 알아내기 위해 찾은 파일에 대해 수행할 시험
// 웹팩에게 .ts로 끝나는 파일들을 점검하도록 한다.
use: 'ts-loader',
// 웹팩이 이 파일로 무엇을 하는지
exclude: /node_modules/
// 웹팩이 노드 모듈을 찾지 않는다.
}
}
}
resolve: {
extensions: ('.ts', '.js')
// 웹팩에게 .ts파일, .js파일을 찾아야 한다고 알려준다.
},
plugins: (
new CleanPlugin.CleanWebpackPlugin()
)
// dist 폴더 내에 항상 가장 최신의 출력이 있게 된다.
};
2⃣ 패키지 설치
npm install --save-dev clean-webpack-plugin프로젝트가 다시 빌드되면 dist 폴더를 비웁니다.
3⃣ package.json 변경
"build": "webpack --config webpack.config.prod.js"
// 웹팩에게 기본적으로 찾는 webpack.congig.js 파일 대신에 dist구성 파일을 사용하도록 지시한다.