Webpack2 / awesome-typescript Loader 似乎无法编译

Question

我当前的 webpack 设置在某处有问题.. 我找不到它。 我正在使用 Angular2+Webpack2+AwesomeTypescriptLoader。应用程序已启动并正在运行，但 webpack 无法正确重新编译我的应用程序。每当我在项目中更改 ts 文件时，我都会得到 ​​p>

[at-loader] 在单独的进程中开始检查...

[at-loader] 好的，0.985 秒。

所以它似乎认识到了变化，但我的 bundles / js 输出文件永远不会更新。我在后台运行 tsc -w 的那一刻，一切正常......但这不应该是必要的，对吧？

谁能发现我的错误？非常感谢！

这是我的配置文件：

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"
  ]
}

网页包：

"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"
  }
}

编辑：这与 webpack 2.2.0-rc.4 btw 相同。

Answer 1

请参阅 awesome-typescript-loader 和 angular2-template-loader。

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

尝试将“awesome-typescript-loader”移到前面。如果这不起作用，您的 webpack 配置可能还有其他细微的问题。希望有帮助。我也有这个文件的问题，在网上找到解决方案会很烦人......