반응형
Webpack을 활용한 라이브러리 번들링
웹 개발에서는 종종 여러 라이브러리와 프레임워크를 사용해야 합니다. 이러한 라이브러리들을 효과적으로 관리하고 번들링하는 것은 프로젝트의 성능과 유지보수성을 높이는 데 중요합니다. Webpack은 이러한 작업을 간편하게 처리할 수 있는 도구 중 하나입니다. 이번 글에서는 Webpack을 사용하여 라이브러리를 번들링하는 방법에 대해 알아보겠습니다.
1. 라이브러리 설치
먼저 필요한 라이브러리를 프로젝트에 설치합니다. 예를 들어, lodash를 설치하고 사용해보겠습니다.
npm install --save lodash2. Webpack 설정 수정
Webpack 설정 파일(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'),
library: 'MyLibrary',
},
externals: {
lodash: 'lodash', // 번들에 포함시키지 않고 외부에서 라이브러리를 로드하도록 설정
},
};
여기서 externals 속성은 번들에 포함시키지 않을 외부 라이브러리를 설정하는 부분입니다.
3. 라이브러리 사용
이제 프로젝트의 다른 파일에서 라이브러리를 사용할 수 있습니다.
// src/index.js
import _ from 'lodash';
function example() {
const result = _.join(['Hello', 'Webpack'], ' ');
console.log(result);
}
example();4. 번들링 실행
이제 라이브러리를 포함한 프로젝트를 빌드해봅시다.
npm run build
빌드가 완료되면 dist 폴더에 bundle.js 파일이 생성됩니다.
5. 외부에서 라이브러리 로드
HTML 파일에서 생성된 번들과 함께 외부에서 라이브러리를 로드할 수 있습니다.
<!-- dist/index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Webpack Library Bundling</title>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.js"></script>
<script src="bundle.js"></script>
</body>
</html>
이제 웹 애플리케이션을 실행하면 외부에서 로드한 lodash 라이브러리와 함께 번들된 스크립트가 동작하는 것을 확인할 수 있습니다.
라이브러리 번들링을 통해 프로젝트를 깔끔하게 유지하고, 외부에서 필요한 라이브러리를 로드하여 초기 로딩 속도를 향상시킬 수 있습니다. 이를 통해 모듈화된 개발환경에서 라이브러리를 효과적으로 활용할 수 있습니다.
반응형
'webpack' 카테고리의 다른 글
| 31. 웹팩의 다양한 활용 사례 - 3 (2) | 2023.12.29 |
|---|---|
| 29. 웹팩의 다양한 활용 사례 - 1 (0) | 2023.12.29 |
| 28. Webpack과 보안 - 2 (0) | 2023.12.29 |
| 27. Webpack과 보안 - 1 (0) | 2023.12.29 |
| 26. 문제 해결과 트러블슈팅 (2) | 2023.12.29 |
| 25. 실전 예제 프로젝트 - 2 (0) | 2023.12.29 |
| 24. 실전 예제 프로젝트 - 1 (0) | 2023.12.29 |
| 23. Webpack Dev Server와 핫 모듈 리플레이스먼트(HMR) - 2 (0) | 2023.12.29 |
