[javascript] Webpack으로 CDN 사용하기

29 Nov 2023

javascript

웹 개발을 할 때, 종종 외부 라이브러리나 모듈을 사용해야 할 때가 있습니다. 전통적으로는 이러한 라이브러리를 CDN (Content Delivery Network)에서 가져오곤 했습니다. 하지만 최근에는 Webpack과 같은 모듈 번들러를 사용하여 프로젝트에서 외부 모듈을 관리하는 것이 일반적입니다.

하지만 여전히 CDN을 사용하고 싶다면, Webpack에서도 간단하게 CDN을 사용할 수 있습니다. 이를 통해 프로젝트 구성을 유연하게 조정할 수 있고, 로딩 속도를 개선할 수 있습니다. 아래에서 Webpack에서 CDN을 사용하는 방법을 알아보겠습니다.

사용법

프로젝트 디렉토리에서 npm init 명령어를 사용하여 package.json 파일을 생성합니다.
Webpack을 설치합니다.

npm install webpack webpack-cli --save-dev

웹팩 설정 파일인 webpack.config.js를 생성하고, 다음과 같이 설정합니다.

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

index.html 파일을 생성합니다.

<!DOCTYPE html>
<html>
<head>
  <title>Webpack CDN Example</title>
</head>
<body>
  <div id="app"></div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script>
  <script src="bundle.js"></script>
</body>
</html>

src/index.js 파일을 생성하고, 필요한 라이브러리를 불러옵니다.

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
  <h1>Hello, CDN!</h1>,
  document.getElementById('app')
);

package.json 파일에 다음 스크립트를 추가합니다.

"scripts": {
  "build": "webpack"
}

터미널에서 npm run build 명령어를 실행하여 번들 파일을 생성합니다.

npx webpack

생성된 dist/bundle.js 파일과 index.html 파일을 웹서버에 배포하면 됩니다.

결론

Webpack을 사용하면 CDN을 간편하게 사용할 수 있습니다. 이를 통해 프로젝트 구성을 유연하게 조정하고, 로딩 속도를 개선할 수 있습니다. Webpack의 모듈 번들링 기능을 활용하면, 외부 라이브러리를 원활하게 사용할 수 있습니다.

더 자세한 정보는 Webpack 공식 문서를 참조하세요.