Webpack 并非所有源地图都显示打字稿答案

【问题标题】：Webpack not all sourcemaps show typescriptWebpack 并非所有源地图都显示打字稿
【发布时间】：2017-03-26 14:36:02
【问题描述】：

所以，我的项目结构如下：

Root
|   index.html
|   package.json
|   tree.txt
|   tsconfig.json
|   webpack.config.js
|   
+---.vscode
|       settings.json
|       tasks.json
|       
+---app
|   |   main.js
|   |   main.js.map
|   |   main.ts
|   |   test.js
|   |   test.js.map
|   |   test.ts
|   |   
|   +---components
|   |       app.component.js
|   |       app.component.js.map
|   |       app.component.ts
|   |       
|   \---modules
|           app.module.js
|           app.module.js.map
|           app.module.ts
|           
\---node_modules
    |
    *SNIP*

我的问题是只有我的 main.ts 源映射在 chrome 开发工具中显示为实际的打字稿，app.module、app.component 和测试显示为已编译的 javascript。

我设法找到的关于 webpack typescript 的任何其他问题要么是特定于 babel 加载程序的，要么是放置断点的问题，要么根本没有生成源映射。

我的 tsconfig：

{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "moduleResolution": "node",
        "sourceMap": true,
        "watch": true,
        "compileOnSave": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "removeComments": false,
        "noImplicitAny": false
    },
    "exclude": [
        "node_modules",
        "typings/browser",
        "typings/browser.d.ts"
    ],
    "atom": {
        "rewriteTsconfig": false
    },
    "typeRoots": [
        "./node_modules/@types"
    ],
    "types": [
        "core-js"
    ]
}

我的 webpack.config.js：

const config = {
    entry: {
        app: "./app/main.ts"
    },
    output: {
        filename: "./bundle.js",
        path: "./"
    },
    devtool: "source-map",
    module: {
        loaders: [
            {
                test: /\.ts$/,
                loaders: ["awesome-typescript-loader", "angular2-template-loader"]
            }
        ]
    },
    resolve: {
        extentions: ["", ".ts", ".js"]
    }
}

module.exports = config;

main.ts 的 Chrome 开发工具输出：

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './modules/app.module';
import { test } from "./test";
const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);
alert(test.msg)


// WEBPACK FOOTER //
// ./~/angular2-template-loader!./app/main.ts

test.js 的 Chrome 开发工具输出：

"use strict";
var test = (function () {
    function test() {
    }
    test.msg = "test";
    return test;
}());
exports.test = test;
//# sourceMappingURL=test.js.map


//////////////////
// WEBPACK FOOTER
// ./app/test.js
// module id = 25
// module chunks = 0

所有单独的 .map 文件源都指向脚本的 ts 版本。

webpack-dev-server 命令输出：

webpack-dev-server -d
 http://localhost:8080/webpack-dev-server/
webpack result is served from /
content is served from C:\Users\Joseph Goodley\Desktop\stockmonitor\frontend
Hash: b3331cfe915060534a0f
Version: webpack 1.13.3
Time: 7618ms
          Asset     Size  Chunks             Chunk Names
    ./bundle.js  1.54 MB       0  [emitted]  app
./bundle.js.map  1.75 MB       0  [emitted]  app
chunk    {0} ./bundle.js, ./bundle.js.map (app) 1.49 MB [rendered]
    [0] ./app/main.ts 326 bytes {0} [built]
    [1] ./~/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js 6.89 kB {0} [built]
    [2] ./~/@angular/compiler/bundles/compiler.umd.js 825 kB {0} [built]
    [3] ./~/@angular/core/bundles/core.umd.js 386 kB {0} [built]
    [4] ./~/rxjs/Subject.js 5.33 kB {0} [built]
    [5] ./~/rxjs/Observable.js 6.04 kB {0} [built]
    [6] ./~/rxjs/util/root.js 471 bytes {0} [built]
    [7] ./~/rxjs/util/toSubscriber.js 707 bytes {0} [built]
    [8] ./~/rxjs/Subscriber.js 8.87 kB {0} [built]
    [9] ./~/rxjs/util/isFunction.js 148 bytes {0} [built]
   [10] ./~/rxjs/Subscription.js 5.99 kB {0} [built]
   [11] ./~/rxjs/util/isArray.js 146 bytes {0} [built]
   [12] ./~/rxjs/util/isObject.js 151 bytes {0} [built]
   [13] ./~/rxjs/util/tryCatch.js 422 bytes {0} [built]
   [14] ./~/rxjs/util/errorObject.js 177 bytes {0} [built]
   [15] ./~/rxjs/util/UnsubscriptionError.js 1.07 kB {0} [built]
   [16] ./~/rxjs/Observer.js 193 bytes {0} [built]
   [17] ./~/rxjs/symbol/rxSubscriber.js 270 bytes {0} [built]
   [18] ./~/rxjs/symbol/observable.js 631 bytes {0} [built]
   [19] ./~/rxjs/util/ObjectUnsubscribedError.js 955 bytes {0} [built]
   [20] ./~/rxjs/SubjectSubscription.js 1.4 kB {0} [built]
   [21] ./~/@angular/platform-browser/bundles/platform-browser.umd.js 120 kB {0} [built]
   [22] ./~/@angular/common/bundles/common.umd.js 121 kB {0} [built]
   [23] ./app/modules/app.module.js 1.42 kB {0} [built]
   [24] ./app/components/app.component.js 1.22 kB {0} [built]
   [25] ./app/test.js 175 bytes {0} [built]
webpack: bundle is now VALID.

我注意到它正在 [23-24] 上构建 js 文件，但是我不知道为什么，另外只是运行 webpack --debug 会生成一个 bundle.js.map 文件，该文件的源也指向 js 文件。

这个问题困扰了我很长一段时间，所以如果是简单的事情我道歉。

感谢您的帮助！

更新：

问题可能是我在 webpacking 之前编译 ts 吗？我尝试在没有编译文件的情况下运行 webpack，但现在它找不到我的 ts 文件：

./app/main.ts
Module not found: Error: Cannot resolve 'file' or 'directory' ./modules/app.module in C:\--\app
resolve file
  C:\--\app\modules\app.module doesn't exist
  C:\--\app\modules\app.module.webpack.js doesn't exist
  C:\--\app\modules\app.module.web.js doesn't exist
  C:\--\app\modules\app.module.js doesn't exist
  C:\--\app\modules\app.module.json doesn't exist
resolve directory
  C:\--\app\modules\app.module doesn't exist (directory default file)
  C:\--\app\modules\app.module\package.json doesn't exist (directory description file)
[C:\--\app\modules\app.module]
[C:\--\app\modules\app.module.webpack.js]
[C:\--\app\modules\app.module.web.js]
[C:\--\app\modules\app.module.js]
[C:\--\app\modules\app.module.json]
 @ ./app/main.ts 3:19-50

为什么它不能解析我的 .ts 文件？

【问题讨论】：

标签： javascript angular typescript webpack

【解决方案1】：

发现问题。

在我的 package.config "extensions" 中应该是 "extensions" 不幸的是，我没有任何错误指示语法问题。

【讨论】：

【解决方案2】：

正如您所说，错误在您的webpack.config.js 中。从 Webpack 2 开始，当你有一个无效的配置对象时它会给出一个错误消息，所以升级你的 Webpack 版本将帮助你在未来避免这些问题。

如果你不想升级 webpack，你可以使用这个包为你自动验证你的配置：https://github.com/js-dxtools/webpack-validator。

【讨论】：