CODEWITHSUNDEEP
javascriptwebpack
Vasyl Savchuk
Vasyl Savchuk

Reputation: 185

Webpack debuging tools

I build my project using webpack and want to be able to look at the code in browser but webpack devtools doesn't appear in browser.
I wonder why? I did everything like they say in a book.

Here is my webpack.config file

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"]
                }
            }
        }
        ]
    }
}

And here is devtools in browser without webpack in it

devtools screenshot

Why doesn't it appear in the browser devtools?

Upvotes: 1

Views: 56

Answers (1)

Emre Koc
Emre Koc

Reputation: 1588

You havent set the mode, which defaults to production. See here: https://webpack.js.org/configuration/mode/

And it should be source-map, without the #. Also added sourceMap to the module options, see if that helps.

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
                }
            }
        }
        ]
    }
}

Upvotes: 1

Related Questions