的WebPack /真棒，打字稿装载机似乎并不编译

Question

我目前的WebPack的设置有问题的地方..我不能找到它。我使用Angular2 + Webpack2 + AwesomeTypescriptLoader。应用程序启动并运行，但的WebPack不能正确地重新编译我的应用程序。每当我在我的项目更改TS文件，我得到

[在装载机]检查已开始在一个单独的进程...

[在装载机]好，0.985秒。

所以似乎认识的变化，但我捆/ JS输出文件永远不会更新。我在后台运行TSC -w的那一刻，一切正常..但不应该是neccessary，对不对？

任何人都可以发现我的错误？非常感谢你！

下面是我的配置文件：

tsconfig：

    {
  "compilerOptions": {
    //"inlineSourceMap": true,
    //"inlineSources": true,
    "module": "commonjs",
    "moduleResolution": "node",
    "target": "es5",
    "sourceMap": true,
    "rootDir": ".",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": true,
    "noImplicitAny": false
  },
  "exclude": [
    "bin",
    "node_modules",
    "wwwroot/dist"
  ]
}

的WebPack：

"use strict";
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var path = require('path');
var CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
    entry: {
        "polyfills": path.resolve("./wwwroot/app/base/polyfills.ts"),
        "app": path.resolve("./wwwroot/app/base/main.ts"),
        "vendor": path.resolve("./wwwroot/app/base/vendors.ts")
    },
    devtool: 'source-map',

    output: {
        filename: "[name].bundle.js",
        chunkFilename: "[id].chunk.js",
        path: "./wwwroot/dist/",
        publicPath: "./dist/"
    },
    watch: true,
    resolve: {
        extensions: ['', '.js', '.ts', '.html']
    },
    module: {
        loaders: [
            //Typescript
            {
                test: /\.tsx?$/,
                loaders: ['angular2-template-loader', 'awesome-typescript-loader']
            },
            // SASS
            {
                test: /\.scss$/,
                loaders: ['style', 'css', 'sass'],
                exclude: '/node_modules/'
            },
            {
                test: /\.html$/,
                loaders: ['raw-loader'],
                exclude: "./wwwroot/index.html"
            },
            // Fonts & Files
            {
                test: /\.(ttf|eot|txt|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/,
                loader: 'file-loader',
                exclude: '/node_modules/'
            }
        ]
    },
    noParse: [/moment.js/],

    plugins: [
        //new webpack.OldWatchingPlugin(),
        // new webpack.optimize.UglifyJsPlugin({
        //    compressor: {
        //        warnings: false
        //    }
        // }),

        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery"
        }),
        new webpack.optimize.CommonsChunkPlugin({
            name: ["app", "vendor", "polyfills"]
        }),

        new HtmlWebpackPlugin({
            template: './wwwroot/index.html'
        })
    ]
};

而版本我使用：

{
  "version": "0.0.1",
  "name": "someapp",
  "private": true,
  "dependencies": {
    "@angular/common": "2.4.0",
    "@angular/compiler": "2.4.0",
    "@angular/core": "2.4.0",
    "@angular/forms": "2.4.0",
    "@angular/http": "2.4.0",
    "@angular/material": "2.0.0-beta.1",
    "@angular/platform-browser": "2.4.0",
    "@angular/platform-browser-dynamic": "2.4.0",
    "@angular/router": "3.4.0",
    "@types/hammerjs": "^2.0.34",
    "@types/lodash": "^4.14.34",
    "angular2-color-picker": "^1.3.0",
    "core-js": "^2.4.1",
    "html-webpack-plugin": "^2.16.2",
    "jquery": "^2.2.0",
    "lodash": "^4.15.0",
    "moment": "^2.14.1",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.1",
    "tablesorter": "2.25.5",
    "webpack": "1.13.2",
    "zone.js": "0.7.2"
  },
  "devDependencies": {
    "angular2-template-loader": "^0.5.0",
    "awesome-typescript-loader": "3.0.0-beta.17",
    "raw-loader": "^0.5.1",
    "clean-webpack-plugin": "^0.1.9",
    "css-loader": "^0.23.1",
    "html-loader": "^0.4.3",
    "node-sass": "^4.1.1",
    "sass-loader": "^4.1.1",
    "style-loader": "^0.13.1",
    "typescript": "2.0.10",
    "typings": "1.3.3"
  }
}

编辑：这是一个与2.2.0的WebPack，rc.4者均基于相同的。

Answer 1

见awesome-typescript-loader和angular2-template-loader。

loaders: [
    {
      test: /\.ts$/,
      loaders: ['awesome-typescript-loader', 'angular2-template-loader'],
      exclude: [/\.(spec|e2e)\.ts$/]
    },
    ...
]

尝试将“真棒，打字稿，装载机前面。如果不行，则可能是您的WebPack配置其他小微妙的问题。希望帮助。我也有这个文件的问题，它可以是很烦人的网上找到解决办法...

Answer 2

我有同样的问题，解决它，当我改变了决心扩展在webpack.config.js来自：

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

至：

resolve: {
    extensions: ['', '.ts', '.tsx', '.js', '.jsx']
},