Не могу увидеть исходный код в Chrome после создания исходных карт с помощью веббэка - PullRequest
Новая
       13

Не могу увидеть исходный код в Chrome после создания исходных карт с помощью веббэка

0 голосов
/ 28 августа 2018

Я включил Enable JavaScript source maps и Enable CSS source maps в моем Chrome.

Исходный код в моей 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)

enter image description here

enter image description here

enter image description here

Мой репозиторий-проект детской площадки: https://github.com/stavalfi/webpack-demo

1 Ответ

0 голосов
/ 28 августа 2018

Хотя webpack:///./src/ работает, вы действительно хотите щелкнуть файл в console.logs, который devtools автоматически укажет вам на нужный файл.

Вы можете исправить отображение файлов в devtools следующим образом: 

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