Инструменты отладки Webpack - PullRequest
Новая
       4

Инструменты отладки Webpack

1 голос
/ 03 августа 2020

Я создаю свой проект с помощью webpack и хочу иметь возможность просматривать код в браузере, но инструменты разработчика webpack не отображаются в браузере. Интересно, почему? Все делал как в книжке.

Вот мой файл webpack.config 

var path = require('path');
module.exports = {
    entry: "./src/App.js",
    output: {
        path: path.join(__dirname, "dist", "assets"),
        filename: 'bundle.js',
        sourceMapFilename: 'bundle.map'
    },
    devtool: "#source-map",
    module: {
        rules: [
            {
            test: /\.js$/,
            exclude: /(node_modules)/,
            use: {
                loader: "babel-loader",
                options: {
                    presets: ["@babel/preset-env", "@babel/preset-react"]
                }
            }
        }
        ]
    }
}

А вот devtools в браузере без webpack

Скриншот devtools

Почему он не отображается в инструментах разработчика браузера?

1 Ответ

1 голос
/ 03 августа 2020

Вы не установили mode, значение по умолчанию - production. См. Здесь: https://webpack.js.org/configuration/mode/

И это должно быть source-map без #. Также добавлено sourceMap в параметры модуля, посмотрите, поможет ли это. 

var path = require('path');
module.exports = {
    mode: 'development', // This
    entry: "./src/App.js",
    output: {
        path: path.join(__dirname, "dist", "assets"),
        filename: 'bundle.js',
        sourceMapFilename: 'bundle.map'
    },
    devtool: "source-map", // This
    module: {
        rules: [
            {
            test: /\.js$/,
            exclude: /(node_modules)/,
            use: {
                loader: "babel-loader",
                options: {
                    presets: ["@babel/preset-env", "@babel/preset-react"]
                    sourceMap: true, // This
                }
            }
        }
        ]
    }
}
...