타입스크립트 + 웹팩 환경에서 mp3 파일 임포트(import) 하는 방법

• 웹팩(Webpack)으로 타입스크립트 – HTML Loader 환경 설정

타입스크립트에서 아무런 준비 없이 mp3 를 import문 또는 require()를 써서 불러오려고 하면 Cannot filnd module ~ or its corresponding type declarations. 에러가 발생합니다. 이 에러를 방지하여 mp3 파일을 임포트할 수 있는 방법입니다.

1. 먼저 npm 프로젝트에서 file-loader 또는 url-loader가 설치되어 있어야 합니다.

2. webpack.config.js 파일의 modules.rules 부분에 아래 코드를 추가합니다.

module: {
    rules: [
        // ... 생략 ...
        {
            test: /\.(mp3|ogg)$/,
            loader: 'file-loader', // 또는 'url-loader'
            options: {
               name: "assets/media/[name].[ext]?[hash]"
            }
        },
    ]
},

3. src 폴더 밑에 @types 폴더를 생성한 뒤, 그 안에 Audio.d.ts를 생성합니다. 

4. Audio.d.ts 파일에 아래와 같은 mp3 형식의 모듈을 선언(declare) 합니다.

declare module '.*mp3' {
    const value: any;
    export default value;
}

파일명이 mp3로 끝나는 새로운 모듈을 선언하겠다는 뜻입니다. value는 아무 타입(any)을 가지며 이것을 기본 값으로 export 합니다. 그러면 value에 파일 또는 BASE64(url-loader인 경우) 값이 담깁니다.

5. 이 과정을 마친 뒤 만약 webpack-dev 실시간 개발이 켜져 있다면 반드시 종료후 재부팅합니다. (터미널 창에서 control + c 버튼 누름)

6. import 문을 사용하여 mp3 파일을 불러옵니다.

import clapHighLeft from "./assets/clap-high-left.mp3"
import clapLowLeft from "./assets/clap-low-left.mp3"
import clapLowRight from "./assets/clap-low-right.mp3"
import clapHighRight from "./assets/clap-high-right.mp3"

7. 사용하고자 하는 곳에는 위의 변수 이름을 사용합니다.  (만약 오류 발생시 .value 를 붙여 사용합니다.)

const audio: HTMLAudioElement = new Audio(clapHighRight)
audio.play()