无法从非标准位置读取源地图

Question

当我的 sources/bundles 位于非标准位置时，我无法让源映射与 Webpack 和 TypeScript 一起工作。如果它们位于标准 ./src 和 ./dist 文件夹中，则一切正常。如果我分别将我的源文件移动到 ./Scripts/src 和 ./Scripts/dist 并引用我的包，我会收到以下错误：

SourceMap http://localhost:56154/Scripts/dist/bundle.js.map read failed: One or more errors occurred..

我在工作和不工作之间唯一改变的是 Scripts 目录。

具体修改前后的相关文件如下：

之前（工作）

webpack.config.js

'use strict';

const path = require('path');

module.exports = {
    mode: 'development',
    context: path.resolve(__dirname, 'src'),
    resolve: {
        extensions: ['.js', '.jsx', '.ts', '.tsx']
    },
    entry: "./index.tsx",
    output: {
        publicPath: '/dist/',
        path: path.resolve(__dirname, './dist'),
        filename: 'bundle.js'
    },

    // Enable sourcemaps for debugging webpack's output.
    devtool: "source-map",

    module: {
        rules: [
            // All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
            { test: /\.tsx?$/, loader: "awesome-typescript-loader" },

            // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
            { enforce: "pre", test: /\.js$/, loader: "source-map-loader" }
        ]
    },
    externals: {
        "react": "React",
        "react-dom": "ReactDOM"
    }
};

tsconfig.json

{
    "compilerOptions": {
        "outDir": "./dist/",
        "sourceMap": true,
        "noImplicitAny": true,
        "module": "commonjs",
        "target": "es5",
        "lib": ["es5", "es6", "dom"],
        "jsx": "react"
    },
    "include": [
        "./src/**/*"
    ]
}

Default.aspx

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    ...
</head>
<body>
    ...

    <div id="example"></div>

    <!-- Dependencies -->
    <script type="text/javascript" src="./node_modules/react/umd/react.development.js"></script>
    <script type="text/javascript" src="./node_modules/react-dom/umd/react-dom.development.js"></script>

    <!-- Main -->
    <script type="text/javascript" src="./dist/bundle.js"></script>

</body>
</html>

之后

webpack.config.js

'use strict';

const path = require('path');

module.exports = {
    mode: 'development',
    context: path.resolve(__dirname, 'Scripts/src'),
    resolve: {
        extensions: ['.js', '.jsx', '.ts', '.tsx']
    },
    entry: "./index.tsx",
    output: {
        publicPath: '/Scripts/dist/',
        path: path.resolve(__dirname, './Scripts/dist'),
        filename: 'bundle.js'
    },

    // Enable sourcemaps for debugging webpack's output.
    devtool: "source-map",

    module: {
        rules: [
            // All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
            { test: /\.tsx?$/, loader: "awesome-typescript-loader" },

            // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
            { enforce: "pre", test: /\.js$/, loader: "source-map-loader" }
        ]
    },
    externals: {
        "react": "React",
        "react-dom": "ReactDOM"
    }
};

tsconfig.json

{
    "compilerOptions": {
        "outDir": "./Scripts/dist/",
        "sourceMap": true,
        "noImplicitAny": true,
        "module": "commonjs",
        "target": "es5",
        "lib": ["es5", "es6", "dom"],
        "jsx": "react"
    },
    "include": [
        "./Scripts/src/**/*"
    ]
}

Default.aspx

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    ...
</head>
<body>
    ...

    <div id="example"></div>

    <!-- Dependencies -->
    <script type="text/javascript" src="./node_modules/react/umd/react.development.js"></script>
    <script type="text/javascript" src="./node_modules/react-dom/umd/react-dom.development.js"></script>

    <!-- Main -->
    <script type="text/javascript" src="./Scripts/dist/bundle.js"></script>

</body>
</html>

TL;DR

如果我只更改以下位置的路径，我的源映射就会中断：

webpack.config.js

context: path.resolve(__dirname, '[Scripts/]src'),
output: {
    publicPath: '/[Scripts/]dist/',
    path: path.resolve(__dirname, './[Scripts/]dist')
}

tsconfig.json

"compilerOptions": {
    "outDir": "./[Scripts/]dist/"
},
"include": [
    "./[Scripts/]src/**/*"
]

Default.aspx

<script type="text/javascript" src="./[Scripts/]dist/bundle.js"></script>

我还需要更改什么？

Answer 1

当我尝试直接浏览地图文件时，出现 500.19 配置错误：

This configuration section cannot be used at this path. This happens when the section is locked at a parent level. Locking is either by default (overrideModeDefault="Deny"), or set explicitly by a location tag with overrideMode="Deny" or the legacy allowOverride="false".

查看我的 Web.config 文件，我注意到我们有以下配置部分：

<location path="Scripts">
  <system.webServer>
    <security>
      <authentication>
        <anonymousAuthentication enabled="true" />
      </authentication>
    </security>
  </system.webServer>
  <system.web>
    <authorization>
      <allow users="?" />
    </authorization>
  </system.web>
</location>

删除那个问题就解决了。但是，我们需要此部分与应用程序的其他部分一起工作。所以我去了 <solutionDir>\.vs\config\applicationhost.config 并做了以下更改：

设置configuration/configSections/sectionGroup[name="system.webServer"]/sectionGroup[name="security"]/sectionGroup[name="authentication"]/section[name="anonymousAuthentication", overrideModeDefault="allow"]（原为"deny"）
最后，设置 configuration/location[path=<webAppProject>]/system.webServer/security/authentication/anonymousAuthentication[enabled="true"]（原为 false）

这圆满解决了问题。

无法从非标准位置读取源地图

Cannot read source map from nonstandard location

source-maps

typescript

webpack