webpack內建TS（typescript）

在webpack搭建的項目中引入ts檔案，文檔中僅提到了引入

ts-loader

，然後webpack.config.js中配置

{ test: /\.ts$/, use: 'ts-loader' }

，這樣會報以下錯誤：

還需要安裝TypeScript編譯器 ：

npm install -D typescript

，編譯還是會報錯：

接着添加tsconfig.json檔案 ：

tsconfig.json

{
    "compilerOptions": {
        "allowSyntheticDefaultImports": true,
        "baseUrl": "./src",
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "module": "commonjs",
        "moduleResolution": "node",
        "noEmitHelpers": true,
        "noImplicitAny": false,
        "sourceMap": true,
        "strictNullChecks": false,
        "target": "es5",
        "paths": {},
        "lib": [
            "dom",
            "es6"
        ],
        "types": [
            // "hammerjs",
            "node",
            "source-map",
            "uglify-js",
            "webpack"
        ]
    },
    "exclude": [
        "node_modules",
        "dist"
    ],
    "awesomeTypescriptLoaderOptions": {
        "forkChecker": true,
        "useWebpackText": true
    },
    "compileOnSave": false,
    "buildOnSave": false,
    "atom": {
        "rewriteTsconfig": false
    }
}
           

最後webpack.config.js檔案配置如下

module: {
    rules: [
      { test: /\.css$/, use: 'css-loader' },
      { test: /\.ts$/, use: 'ts-loader' }
    ]
  },
           

再編譯就可以了。。