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

我的游乐场项目存储库：https://github.com/stavalfi/webpack-demo

Answer 1

尽管webpack:///./src/可以工作，但您确实要在console.logs中单击一个文件，devtools会自动将您指向正确的文件。

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

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

使用Webback发出源地图后无法在chrome中查看源代码

1 个答案: