Webpack?
Webpack은 모던 자바스크립트 애플리케이션을 위한 강력한 모듈 번들러이다.
웹 애플리케이션의 다양한 자원들(JavaScript, StyleSheet, Image 등)을 하나의 파일 또는 여러 파일로 번들링하는 데 사용한다.
Webpack의 핵심 원칙은 모든 것을 module로 취급한다는 것이다. 즉 CSS, 이미지, 폰트 등도 자바스크립트 모듈처럼 처리된다.
Webpack 설정 방법
웹팩이 모듈 번들러인거는 알겠는데 그래서 웹팩이 뭐하는 거야?라고 하면
우리가 웹 개발하면서 만나는 package.json파일을 설정하는 거라고 생각하면 됩니다.
npm init을 실행하여 package.json파일을 생성한 후 웹팩과 관련된 패키지를 설치하면 됩니다.
1. 프로젝트 초기화
mkdir my-webpack-project
cd my-webpack-project
npm init -y # '-y'는 모든 프롬프트에 대해 기본값을 자동으로 선택하도록 합니다.
2. 웹팩 및 필요한 패키지 설치
npm install webpack webpack-cli --save-dev
3. 웹팩 설정 파일 생성
프로젝트 루트에 `webpack.config.js` 파일을 생성합니다.
// webpack.config.js
const path = require('path');
module.exports = {
entry: './src/index.js', // 엔트리 포인트
output: {
filename: 'bundle.js', // 번들링된 파일 이름
path: path.resolve(__dirname, 'dist') // 출력 경로
}
};
4. `package.json`에 npm 스크립트 추가
`package.json` 파일에서, "scripts" 섹션에 아래와 같이 웹팩을 실행할 스크립트를 추가합니다.
"scripts": {
"build": "webpack --mode production",
"start": "webpack --watch"
}
5. 로더 및 플러그인 설치(선택 사항)
CSS와 JavaScript ES6+ 코드를 변환하려면 아래와 같이 로더와 플러그인을 설치하고 설정할 수 있다.
- Babel(JS 변환)
npm install babel-loader @babel/core @babel/preset-env --save-dev- CSS 로더
npm install css-loader style-loader --save-dev설치 후, `webpack.config.js`에 아래와 같이 해당 로더들을 추가합니다.
module.exports = {
// ...
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
}
]
}
// ...
};
6. 소스 코드 작성 및 번들링
`src/index.js` 및 다른 필요한 파일들을 작성한 후, 아래의 명령어로 웹팩을 실행하면 `dist` 폴더에 번들링된 결과가 생성됩니다.
npm run build
이러한 기본 설정을 통해 웹팩을 사용하여 프로젝트를 시작할 수 있다. 웹팩은 매우 유연하여 다양한 플러그인과 로더를 통해 확장할 수 있기 때문에, 프로젝트의 요구 사항에 따라 설정을 계속 조정하고 확장해 나가는 것이 좋다.