Javascript Can'；在使用webback发出源地图后，在chrome中看不到源代码

我在我的chrome浏览器中启用了

启用JavaScript源代码映射

和

启用CSS源代码映射

我的IDE中的源代码：

Promise.resolve().finally();

class MySpecialClass {

}

export default (text = "11112221") => {
    const element = document.createElement("div");

    element.innerHTML = text;
    new MySpecialClass();
    return element;
};

.babelrc:（

ie:7

没有

类

和

常量

）

Webpack.config.js：

module.exports = {
    devtool: "source-map",
    mode: process.env.NODE_ENV === 'development' ? "development" : "production",
    entry: "./src/index.js",
    output: {
        // default output directory: "dist" under the main folder.
        filename: "bundle.js"
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        babelrc: true
                    }
                }
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            title: "Webpack demo",
        })
    ],
    devServer: {
        overlay: true,
        stats: "errors-only",
        host: process.env.HOST,
        port: process.env.PORT,
        open: true, // Open the page in browser
    },
};

Chrome开发工具：（我可以看到预期的CSS，但看不到我的JS代码）

---

---

我的游乐场项目存储库：

尽管

webpack:///./src/

确实有效，您确实希望单击console.logs中的文件，devtools会自动将您指向正确的文件

您可以使用以下方法修复devtools中文件的映射：

output: {
    devtoolModuleFilenameTemplate: (info) => path.resolve(info.absoluteResourcePath).replace(/\\/g, '/'),
  },

---

它们都应该在左侧栏的

网页包下可见：//

。你在里面看到他们了吗？是的！调试工作就像魔术一样！请贴出答案。谢谢：）在下面：

webback://./src/

谢谢！您能解释一下什么是

devtoolModuleFilenameTemplate

，

info.absoluteResourcePath

，以及您要替换什么吗？再次感谢！Shalom，@StavAlfi，这是一个相对较新的网页版。你可以阅读所有关于它的内容

output: {
    devtoolModuleFilenameTemplate: (info) => path.resolve(info.absoluteResourcePath).replace(/\\/g, '/'),
  },