除了在 webpack 中指定的“条目”之外，源映射没有正确映射答案

【问题标题】：Sourcemaps not mapping correctly except "entry" specified in webpack除了在 webpack 中指定的“条目”之外，源映射没有正确映射
【发布时间】：2018-09-04 05:01:41
【问题描述】：

我正在使用 ASP.NET Core 2.0。如果有人想查看详细代码或自己运行，代码可以在这里找到：https://github.com/jakelauer/BaseballTheater/tree/master/BaseballTheaterCore

我的基本问题是我希望我的项目中每个生成的js 文件都有一个源映射回原始.ts 或.tsx 文件。这对我的entry 文件 (./ClientApp/boot.tsx) 不起作用除了。

这是我的webpack.config.js：

const path = require('path');
const webpack = require('webpack');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const CheckerPlugin = require('awesome-typescript-loader').CheckerPlugin;
const bundleOutputDir = './wwwroot/dist';

module.exports = (env) => {
    const isDevBuild = !(env && env.prod);
    return [{
        stats: { modules: false },
        entry: { 'main': './ClientApp/boot.tsx' },
        resolve: { extensions: ['.js', '.jsx', '.ts', '.tsx'] },
        output: {
            path: path.join(__dirname, bundleOutputDir),
            filename: '[name].js',
            publicPath: 'dist/'
        },
        module: {
            rules: [
                { test: /\.tsx?$/, include: /ClientApp/, use: 'awesome-typescript-loader?silent=true' },
                { test: /\.css$/, use: isDevBuild ? ['style-loader', 'css-loader'] : ExtractTextPlugin.extract({ use: 'css-loader?minimize' }) },
                {
                    test: /\.scss/,
                    use: ["style-loader", "css-loader", "sass-loader"]
                },
                { test: /\.(png|jpg|jpeg|gif|svg)$/, use: 'url-loader?limit=25000' }
            ]
        },
        plugins: [
            new CheckerPlugin(),
            new webpack.DllReferencePlugin({
                context: __dirname,
                manifest: require('./wwwroot/dist/vendor-manifest.json')
            })
        ].concat(isDevBuild ? [
            // Plugins that apply in development builds only
            new webpack.SourceMapDevToolPlugin({
                filename: '[file].map', // Remove this line if you prefer inline source maps
                moduleFilenameTemplate: path.relative(bundleOutputDir, '[resourcePath]') // Point sourcemap entries to the original file locations on disk
            })
        ] : [
            // Plugins that apply in production builds only
            new webpack.optimize.UglifyJsPlugin(),
            new ExtractTextPlugin('site.css')
        ])
    }];
};

根据我对这个文件的解释和对 webpack 有限的理解，这应该可行。我的每个文件都生成了一个 .js.map 文件，并且它似乎在生成的 .js 文件中被引用。但是，在 Chrome 中调试时，除了 boot.tsx 的那个之外，它们实际上都没有加载。

Chrome 中js 文件之一的示例：

并且该文件确实具有要加载的正确文件：

当我在 /wwwroot/dist/ 中打开 main.js.map 并在里面打开 ts 的 Ctrl+F 时，我只找到 boot.tsx 而没有我希望找到的其他 .ts 或 .tsx 文件。

我不是 webpack 专家，所以我不知道还能做什么！

【问题讨论】：

我也不是专家，但如果您专门谈论sourcemaps，我确实看到了game_list.js.map。我认为*.js.map 文件是源映射。当您的浏览器运行game_list.js 文件时，它可能会检测到game_list.js.map 文件，并在浏览器中调试时显示原始源代码。您能澄清一下您要完成的工作吗？
@RicoKahler 是的，所以浏览器只得到一个文件：main.js，它是由 webpack 生成的。 Webpack 内置了一些黑魔法，当浏览器加载它时，它会将其拆分为捆绑在一起的各种文件。该文件显然不适用于我的 TypeScript 文件。我希望我能提供更多信息，我希望有人知道要问我什么来帮助我！
我看到你正在使用 webpack 2。也许升级到 3 或 4 可能会解决这个问题，但是有一些重大更改，所以你可能需要更改一些内容才能使升级正常工作
@RicoKahler 我更新到 webpack 4 看看是否可以单独解决问题，但它似乎没有做任何事情。
尝试将devtool option 设置为source-map，您可能必须设置为npm install --save-dev source-map-loader

标签： javascript asp.net node.js webpack asp.net-core

【解决方案1】：

从 cmets 中，我们通过以下方式找到了解决方案：

升级到最新的 webpack（在本例中为 v4）和
通过npm install --save-dev source-map-loader 安装源映射加载器和
在webpack.config.js 中设置devtool: 'source-map'。

source-map option 告诉 webpack 发出一个完整的独立源映射文件。这是来自 webpack 文档：

source-map - 完整的 SourceMap 作为单独的文件发出。它将参考注释添加到包中，以便开发工具知道在哪里可以找到它。

【讨论】：