TypeScript 與 Webpack - 顯示 JavaScript 但不顯示 Z558B544CF685F39D34EZC403 源映射

Question

I have taken it upon myself to move our products angularjs codebase into the current day with the eventual goal to move to Angular 2. The first step for me is to get webpack and typescript working with the codebase.

JavaScript 捆綁工作並且應用程序可以運行，但是如果我將其中一個文件更改為 TypeScript 文件和 webpack 再次應用程序文件。 當我有sourceMap: true和devtool: 'inline-source-map'時，我看不到它的源映射。 如果我查看bundle.js output 我確實在那里看到了我的 TypeScript 類。 如果我使用tsc手動編譯到 JavaScript 並使用 javascript 文件，那么一切正常，因此任何可能生成的代碼都沒有問題。

我覺得我錯過了什么。

webpack.config.js：

const webpack = require('webpack');
const path = require('path');

const config = {
  entry: './wwwroot/index.js',
  devtool: 'inline-source-map',
  output: {
    path: path.resolve(__dirname, 'wwwroot'),
  filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        test: /\.ts?$/,
        use: [
          'awesome-typescript-loader'
        ],
        exclude: [/node_modules/, /lib/]
      }
    ]
  },
  resolve: {
    extensions: [
      '.ts',
      '.js'
    ]
  },
  plugins: [
    new webpack.IgnorePlugin({
        resourceRegExp: /^\.\/locale$/
      })
  ],
  externals: []
};

module.exports = config;

index.js - 因為這是一個非常古老的 angularjs 應用程序，它沒有一個入口點。 index.js 列出了模塊和組件的單獨導入。 它還包括 typescript 文件的導入

require.context('./app', true,  /^\.\/.*\.ts$/); 

// and a list of modules
import './app/modules/module_a.js';
import './app/modules/module_b.js';
//etc 

tsconfig.json

{
  "compilerOptions": {
    "sourceMap": true,
    "outDir": "wwwroot",
    "noImplicitAny": false,
    "module": "es6",
    "target": "es5",
    "allowJs": true,
    "lib": [ "dom", "es7" ]
  },
  "include": [
    "wwwroot/app/*"
    ],
  "exclude": ["**/lib"]
}

Answer 1

所以事實證明我的問題似乎是 webpack 的工作方式。 如果我不嘗試從 TypeScript 文件中導入某些內容，它將不會加載它並顯示源映射。 在我從我的 angularjs 應用程序模塊導入新的 TypeScript 組件后，它起作用了。