javascript - 使用 webpack 发出源映射后无法在 chrome 中看到源代码

Question

我在我的 chrome 中启用了 Enable JavaScript source maps 和 Enable CSS source maps。

我的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 没有 classes 和 const)

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "ie": 7,
          "edge": "17",
          "firefox": "60",
          "chrome": "10",
          "safari": "11.1",
          "esmodules": false
        },
        "useBuiltIns": "usage"
      }
    ]
  ]
}

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 代码)

---

我的 Playground 项目存储库:https://github.com/stavalfi/webpack-demo

Answer 1

尽管 webpack:///./src/ 确实有效，但您确实需要单击 console.logs 中的文件，devtools 会自动将您指向正确的文件。

你可以用这个修复 devtools 中文件的映射:

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