나에게 맞는 webpack 세팅하기
- NPM 초기화
npm 초기화(initialization) 명령을 사용해 프로젝트를 초기 구성 (package.json 생성)
npm init -y
- Webpack 설치 & 구성
webpack, webpack-cli 패키지를 설치한 후, webpack.config.js 파일을 만들어 구성
예시 코드
npm i webpack webpack-cli -D // 설치
webpack.config.js -->
// Node.js 모듈 path 불러오기
const path = require('path')
// CommonJS 방식의 모듈 내보내기
module.exports = {
// 엔트리 파일 설정
entry: './src/index.js',
// 아웃풋 파일 출력 설정
output: {
// 파일 이름
filename: 'main.js',
// 경로
path: path.resolve(__dirname, './dist'),
},
// 번들링 모드 설정
mode: 'development',
}
- package.json에 scripts 부분에 명령어 추가하기
"bundle": "webpack" 이렇게만 사용해도 npm run bundle 명령어 실행 시 dist 폴더에 번들링 된 결과가 나옴
"start": "webpack-dev-server --config webpack.config.js" 이 명령어의 경우webpack.config.js파일에 따른 로컬로 실행 가능
"scripts": {
"bundle": "webpack",
"start": "webpack-dev-server --config webpack.config.js"
},
- Babel CLI 설치
@babel/core @babel/cli 패키지를 프로젝트에 설치하면 명령어 환경(CLI)에서 Babel 컴파일러를 사용할 수 있음
npm i -D @babel/core @babel/cli
- Babel + Babel Loader 구성
@babel/core, @babel/preset-env, babel-loader 패키지를 프로젝트에 설치한 후, Webpack 구성 파일의 모듈 규칙 안에 로더를 설정
npm i @babel/core @babel/preset-env babel-loader -D
- 클래스 필드 선언
ES 표준에 제안 된 클래스 필드 선언(class field declarations) 구문을 사용하면 클래스 문법 사용 시 편리하게 스태틱, 인스턴스 멤버를 추가해 사용할 수 있습니다. 하지만 이 기능을 현재 제안된 기술로 @babel/preset-env 사전 설정에는 포함되어 있지 않아 사용할 수 없음
npm i -D @babel/plugin-proposal-class-properties
npm install -D @babel/plugin-transform-runtime
- CleanWebpackPlugin 및 HtmlWebpackPlugin 설치
HtmlWebpackPlugin : HTML 파일 생성을 단순화
CleanWebpackPlugin : Webpack에 의해 빌드 된 결과물을 자동 정리하는 플러그인을 활용하기 위해 clean-webpack-plugin 패키지를 프로젝트에 설치합니다.
npm install --save-dev html-webpack-plugin
npm install --save-dev clean-webpack-plugin