웹팩은 자바스크립트 프로젝트에서 모듈화된 코드를 하나의 번들로 만들어주는 도구입니다. 이를 통해 프로젝트의 성능을 향상시키고 코드의 관리를 용이하게 할 수 있습니다.
웹팩의 동작 원리
웹팩은 entry와 output을 기반으로 동작합니다. entry는 웹팩이 모듈 번들링을 시작할 진입점을 지정하는 설정 속성입니다. output은 번들된 코드의 결과물 파일의 경로와 파일명을 지정하는 설정 속성입니다.
웹팩은 entry에서 시작해서 의존성에 따라 모듈을 로드하고, 각 모듈을 변환하여 번들로 만듭니다. 이때, 다양한 로더(loader)를 사용하여 자바스크립트 외의 파일 (CSS, 이미지 등)도 모듈로 인식할 수 있도록 할 수 있습니다.
웹팩 설정 파일 작성하기
웹팩을 사용하기 위해서는 프로젝트에 webpack.config.js라는 설정 파일을 작성해야 합니다. 이 설정 파일에서 웹팩의 동작을 세부적으로 커스터마이징할 수 있습니다.
아래는 간단한 예시입니다:
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: 'babel-loader',
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader'],
},
],
},
};
위의 설정 파일에서 entry는 프로젝트의 진입점 파일을 지정하고, output은 번들된 파일의 경로와 이름을 설정합니다. module.rules에서는 다양한 로더를 설정할 수 있습니다. 예를 들어, 자바스크립트 파일은 Babel을 사용하여 번들링하고, CSS 파일은 style-loader와 css-loader를 사용하여 번들링하는 등의 작업이 가능합니다.
웹팩 실행하기
웹팩 설정 파일을 작성한 후에는 명령어를 통해 웹팩을 실행할 수 있습니다.
$ npx webpack
위 명령어를 실행하면 웹팩이 설정 파일에 따라 프로젝트의 모듈을 번들로 만들어줍니다. 번들된 결과물은 output에 설정한 경로와 이름에 따라 생성됩니다.
결론
웹팩은 자바스크립트 프로젝트에서 모듈 번들링을 쉽게 처리할 수 있는 강력한 도구입니다. 웹팩의 설정 파일을 통해 프로젝트에 필요한 로더와 플러그인 등을 세부적으로 설정할 수 있으며, 번들된 결과물을 생성하여 프로젝트의 성능을 향상시킬 수 있습니다.