Typesciprt class를 Import시 ‘Module not found : Error…’ 발생 해결

1. 아래와 같은 DSButton이라는 class를 export

   export class DSButton {
       x : number = 0;
       y : number = 0;
       width : number = 0;
       height : number = 0;
   
       constructor(x:number, y:number, width:number, height:number){
           this.x = x;
           this.y = y;
           this.width = width;
           this.height = height;
       }
   
       ToString() {
           return "x=" + this.x + ", y=" + this.y + ", width=" + this.width + ", height=" + this.height;
       }
   }
   

2. app.ts에서 DSButton을 사용하는 sample 작성

   import { DSButton } from './DSButton'
   
   let button : DSButton;
   button = new DSButton(0, 0, 100, 200);
   console.log('button.ToString()=' + button.ToString()); 
   

3. webpack.config.json에 entry를 app.ts로 설정 하고 awesome-typescript-loader를 설정

   module.exports = {
     entry: './app.ts',
     output: {
       path: __dirname + '/build',
       filename: 'bundle.js'
     },
   
     module: {
           loaders: [
               // All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
               { test: /\.tsx?$/, loader: "awesome-typescript-loader" },
   
               // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
               { enforce: "pre", test: /\.js$/, loader: "source-map-loader" }
           ]
     }          
   };
   

4. webpack을 bundle수행시 DSButton module을 찾을 수 없다는 Error 발생
5. webpack.config.json 파일에 resolve : extensions:['.ts'] 추가

   resolve: {
       extensions: ['.ts']
     }
   

6. 정상 bundle 및 정상 출력 됨