[javascript] Webpack으로 외부 라이브러리 번들링하기
Webpack은 웹 애플리케이션을 위한 모듈 번들러로서 자바스크립트 파일뿐만 아니라 CSS, 이미지 등 다양한 파일을 하나로 묶어 주는 역할을 합니다. 이번에는 Webpack을 사용하여 외부 라이브러리를 번들링하는 방법에 대해 알아보겠습니다.
1. 패키지 설치
먼저 프로젝트 디렉토리에서 다음 명령어를 사용하여 Webpack과 관련된 패키지들을 설치해야 합니다.
npm install webpack webpack-cli --save-dev
2. 웹팩 설정 파일 생성
프로젝트 디렉토리에 webpack.config.js라는 이름의 파일을 생성하고 다음과 같이 작성합니다.
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
resolve: {
extensions: ['.js']
},
module: {
rules: []
}
};
위의 코드에서 entry는 웹팩이 번들링할 진입점 파일을 설정하는 부분입니다. output은 번들링된 파일의 경로와 이름을 설정하는 부분입니다.
3. 외부 라이브러리 추가
번들링할 때 외부 라이브러리를 포함시키기 위해서는 webpack.config.js 파일의 module.rules에 다음과 같이 설정해 주어야 합니다.
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
}
]
},
externals: {
jquery: 'jQuery'
}
위의 코드에서 externals는 해당 라이브러리를 번들링의 대상에서 제외시키는 역할을 합니다. 위의 예시에서는 jquery 라이브러리를 제외시키도록 설정되어 있습니다.
4. 번들링 실행
이제 다음 명령어를 사용하여 번들링을 실행할 수 있습니다.
npx webpack
번들링이 완료되면 dist 폴더에 bundle.js 파일이 생성됩니다. 이 파일에는 진입점 파일과 외부 라이브러리가 포함되어 있습니다.
Webpack을 사용하여 외부 라이브러리를 번들링하는 방법에 대해서 알아보았습니다. Webpack을 통해 프로젝트의 파일들을 효율적으로 관리하고 최적화하면 애플리케이션의 성능을 향상시킬 수 있습니다.