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' }
    ]
  },

再编译就可以了。。