[typescript] 웹팩으로 타입스크립트와 웹사이트 오프라인 사용 연동하기

11 Dec 2023

typescript

웹팩(Webpack)은 웹 애플리케이션을 빌드하는 강력한 도구입니다. 타입스크립트(TypeScript)와 웹사이트를 오프라인에서 사용할 수 있도록 만들기 위해 웹팩을 사용하는 방법을 알아보겠습니다.

타입스크립트와 웹팩 설정하기

먼저, 타입스크립트와 웹팩을 연동하기 위해 tsconfig.json 파일을 작성합니다.

{
  "compilerOptions": {
    "outDir": "./dist/",
    "target": "es5",
    "module": "es6",
    "strict": true
  }
}

웹팩을 설치하고 webpack.config.js 파일을 만들어 다음과 같이 설정합니다.

const path = require('path');

module.exports = {
  entry: './src/index.ts',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  resolve: {
    extensions: ['.ts', '.js']
  },
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: 'ts-loader',
        exclude: /node_modules/
      }
    ]
  }
};

오프라인 사용을 위한 서비스 워커 설정

웹사이트를 오프라인에서 사용하려면 서비스 워커(Service Worker)를 등록해야 합니다. 이를 위해 sw.js 파일을 만들고 다음과 같이 설정합니다.

self.addEventListener('install', function(event) {
  event.waitUntil(
    caches.open('offline-cache').then(function(cache) {
      return cache.addAll([
        '/',
        '/index.html',
        '/styles/main.css',
        '/scripts/main.js'
      ]);
    })
  );
});

self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request).then(function(response) {
      return response || fetch(event.request);
    })
  );
});

그리고 index.html 파일 내에서 서비스 워커를 등록합니다.

<script>
  if ('serviceWorker' in navigator) {
    window.addEventListener('load', function() {
      navigator.serviceWorker.register('/sw.js');
    });
  }
</script>

웹팩으로 빌드하고 오프라인 사용 테스트하기

이제 웹팩으로 빌드를 실행하고 오프라인 상태에서 웹사이트가 제대로 동작하는지 테스트해봅니다.

npx webpack

오프라인 상태에서 웹사이트를 열어보고, 서비스 워커가 정상적으로 동작하는지 확인합니다.

이제 당신의 타입스크립트 웹앱이 웹팩으로 빌드되고 오프라인 상태에서도 사용할 수 있게 되었습니다.

더 많은 정보는 웹팩 공식 문서를 참고해주세요.