Webpack调试工具

Question

我使用webpack构建我的项目，并希望能够在浏览器中查看代码，但webpack devtools没有出现在浏览器中。

我想知道为什么？我做了他们在书上说的每件事。

这是我的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"]
                }
            }
        }
        ]
    }
}

这是浏览器中没有webpack的devtools

​

​

为什么它不出现在浏览器devtools中？

Answer 1

您还没有设置默认为production的mode。查看此处：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
                }
            }
        }
        ]
    }
}