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 组件后，它起作用了。