# 1. Webpack 기본 설정
- NPM 프로젝트 생성
webpack
,webpack-cli
설치index.html
과app.js
파일 생성 및 작성webpack.config.js
생성 및 설정build
명령 등록- 빌드 실행
# 2. Webpack & Babel
- Webpack 설정이 완료된 프로젝트 만들기 (1. Webpack 기본설정)
@babel/core
,@babel/preset-env
,babel-loader
설치webpack.config.js
에babel
설정build
실행babel
사용 전후 비교
# 3. Webpack & TS
- Webpack 설정이 완료된 프로젝트 만들기 (1. Webpack 기본설정)
index.html
생성 및 작성app.ts
파일 생성 및 작성typescript
,ts-loader
설치tsconfig.json
생성 및 설정webpack.config.js
생성 및 설정build
실행 및 확인
# 4. Webpack & babel & TS
- Webpack 설정이 완료된 프로젝트 만들기 (1. Webpack 기본설정)
index.html
생성 및 작성tsconfig.json
생성 및 작성app.ts
생성 및 작성- 라이브러리 설치
webpack.config.js
에Babel
설정build
실행 및 확인babel
&typescript
연동시, 알아야 할 점
# 5. Webpack & SASS
- Webpack 설정이 완료된 프로젝트 만들기 (1. Webpack 기본설정)
- 라이브러리 설치
webpack.config.js
에sass-loader
,css-loader
,style-loader
설정index.html
생성 및 작성myStyle.sass
생성 및 작성app.js
생성 및 작성build
실행 및 확인Webpack
&SASS
연동시, 알아야 할 점
# 6. Webpack & CSS
- Webpack 설정이 완료된 프로젝트 만들기 (1. Webpack 기본설정)
- 라이브러리 설치
webpack.config.js
에css-loader
,style-loader
설정index.html
생성 및 작성myStyle.css
생성 및 작성app.js
생성 및 작성build
실행 및 확인Webpack
&CSS
연동시, 알아야 할 점
# 7. ESLint & Prettier
app.js
생성 및 작성- 라이브러리 설치
ESLint
초기화.eslintrc.js
또는.eslintrc.json
설정VSCode 설정 (settings.json)
에저장 시 자동수정 (autoFix)
설정prettier
설정 추가.eslintrc.json
설정시, 주의사항
# 8. Webpack & TS & ESLint & Prettier
- VSCode 의 작업영역에
저장시 자동수정
기능 설정 index.html
생성 및 작성app.ts
생성 및 작성webpack
,webpack-cli
,html-webpack-plugin
,webpack-dev-server
,typescript
,ts-loader
설치tsconfig.js
생성 및 작성webpack.config.js
생성 및 설정eslint
,@typescript-eslint/parser
,@typescript-eslint/eslint-plugin
설치ESLint 초기화
실행 및 설정prettier
,eslint-config-prettier
,eslint-plugin-prettier
설치.eslintrc.json
에Prettier
설정 추가Webpack
&Typescript
&ESLint
&Prettier
연동시, 알아야 할 점
지금까지 Webpack 관련 설정들에 대한 종합 예제 프로젝트 입니다.