typescript에서 직접 bundle.js를 만드는 방법

이 기사에서는 typescript에서 직접 bundle.js를 만드는 방법에 대해 씁니다.

<지금까지의 bundle.js의 작성 방법>
1.ts 파일을 컴파일하여 js 파일 만들기
2.js 파일을 번들로 bundle.js 만들기

이 흐름이 번거롭기 때문에 직접 해 버리자.

1.ts-loader 설치

npm install --save-dev ts-loader typescript

2.webpack의 설정 파일에 기술

webpack.config.js에 어떤 파일에서 ts-loader를 실행할 것인지를 기술한다.

webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/main.ts',  //最初に読み込ませるファイルもtsファイルに変更

  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  devtool: 'inline-source-map',

  module: {
    rules: [{
      test: /\.ts$/,　　//どういうファイルに対して
      use: 'ts-loader',　　//何をするか
      exclude: /node_modules/ 　　//このファイルは例外
    }]
  }
}

3.build 해 본다

1. 다음 명령 실행.npm run build
네, 오류이지만,,,,ERROR in ./src/main.ts
Module not found: Error: Can't resolve './foods.js' in '/Users/*****/*****/******/src'
@ ./src/main.ts 1:0-35 2:0-5
여기 오류로 인해 main.ts에서 js 파일을 가져 오려고하기 때문입니다.

main.ts

import { Foods } from "./foods.js";

Foods.getInstance();

그렇다면 foods.ts로 다시 쓰면 좋지 않아?


그래도 오류가 발생합니다.

그러나 Webpack을 사용하는 경우 확장자는 .ts로 정답입니다!

그렇지만 에러가 나와 있는 채로 기분 나쁘네요. . .

이렇게하면 해결할 수 있습니다!

1.import 원래의 확장자를 지워 버립니다.

※이대로라면 build시에 에러가 됩니다

2.webpack 구성 파일에 다음을 설명합니다.

webpack.config.js

const path = require('path');

module.exports = {
  entry: './src/main.ts',

  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  devtool: 'inline-source-map',

  module: {
    rules: [{
      test: /\.ts$/,
      use: 'ts-loader',
      exclude: /node_modules/
    }]
  }
--------ここから--------------------
  resolve: {
    extensions: ['.ts','.js']
  }
}

이것을 쓰는 것으로 확장자가 없어도 OK.

이 설명으로 가져오려고 할 때 확장자가 없으면 왼쪽에서 확인해 줍니다.

Webpack은 정말 편리하네요. . .

3. 다시 build 해 본다

다음 명령 실행.npm run build
이번에는 무사히 오류없이 bundle.js가 작성되었습니다! ! !

이상이 됩니다.