如何避免“TypeError：popper.js.map 不是有效的 URL”消息

Question

我是 NodeJS、React 和 Webpack 的新手。我已经安装了需要 popper.js 的引导程序。当我运行我的应用程序时，一切正常，但我在 Firefox 的控制台中出现如下错误：

文件 package.json

{
  "name": "basketmetrics2",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "nodemon --exec babel-node src/server/server.js",
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --mode production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/cli": "^7.2.3",
    "@babel/core": "^7.3.3",
    "@babel/node": "^7.2.2",
    "@babel/preset-env": "^7.3.1",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.5",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "css-loader": "^2.1.0",
    "file-loader": "^3.0.1",
    "html-webpack-plugin": "^3.2.0",
    "node-sass": "^4.11.0",
    "nodemon": "^1.18.10",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1",
    "url-loader": "^1.1.2",
    "webpack": "^4.29.4",
    "webpack-dev-middleware": "^3.5.2",
    "webpack-livereload-plugin": "^2.2.0"
  },
  "dependencies": {
    "bootstrap": "^4.3.1",
    "express": "^4.16.4",
    "jquery": "^3.3.1",
    "react": "^16.8.2",
    "react-bootstrap": "^1.0.0-beta.5",
    "react-dom": "^16.8.2"
  }
}

文件 webpack.config.js

import webpack from "webpack";
import htmlWebpackPlugin from "html-webpack-plugin";
import LiveReloadPlugin from "webpack-livereload-plugin";


export default {
    mode: "development",
    entry: "./src/client/index.js",
    output: {
        path: "/",
        filename: "bundle.js"
    },
    module: {
        rules: [
            {
                use: {
                    loader: "babel-loader"
                },                
                test: /\.js$/,
                exclude: /node_modules/
            },
            {
                use: ["style-loader", "css-loader"],
                test: /\.css$/
            },
            {
                test: /\.scss$/,
                use: [
                    {
                        loader: "style-loader"
                    },
                    {
                        loader: "css-loader",
                        options: {
                            sourceMap: true
                        }
                    },
                    {
                        loader: "saas-loader", 
                        options: {
                            sourceMap: true
                        }
                    }
                ]
            },
            {
                test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
                loader: "url-loader",
                options: {
                    limit: 10000
                }
            }
        ]
    },
    plugins: [
        new htmlWebpackPlugin({
            template: "./src/client/index.html"
        }),
        new LiveReloadPlugin()
    ]
}

我试图将这个配置插件添加到我的 webpack.config.js 文件中，但它对我不起作用:(

module.exports = {
  // other configs
  plugins: [
    new htmlWebpackPlugin({
        template: "./src/client/index.html"
    }),
    new LiveReloadPlugin(),
    new webpack.SourceMapDevToolPlugin({
      exclude: ['popper.js']
    })
  ]
}

我不知道我做错了什么。如何配置我的应用程序以避免此类错误？

编辑我：

如果我修改我的 webpack.config.js 文件，将这个条目“new webpack.SourceMapDevToolPlugin()”添加到插件中，它对我不起作用:(

import webpack from "webpack";
import htmlWebpackPlugin from "html-webpack-plugin";
import LiveReloadPlugin from "webpack-livereload-plugin";


export default {
    mode: "development",
    entry: "./src/client/index.js",
    output: {
        path: "/",
        filename: "bundle.js"
    },
    module: {
        rules: [
            {
                use: {
                    loader: "babel-loader"
                },                
                test: /\.js$/,
                exclude: /node_modules/
            },
            {
                use: ["style-loader", "css-loader"],
                test: /\.css$/
            },
            {
                test: /\.scss$/,
                use: [
                    {
                        loader: "style-loader"
                    },
                    {
                        loader: "css-loader",
                        options: {
                            sourceMap: true
                        }
                    },
                    {
                        loader: "saas-loader", 
                        options: {
                            sourceMap: true
                        }
                    }
                ]
            },
            {
                test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
                loader: "url-loader",
                options: {
                    limit: 10000
                }
            }
        ]
    },
    plugins: [
        new htmlWebpackPlugin({
            template: "./src/client/index.html"
        }),
        new LiveReloadPlugin(),
        new webpack.SourceMapDevToolPlugin()
    ]
}

Answer 1

这是一个警告，而不是错误。发生这种情况是因为 devtools 正在尝试查找 pooper.js 的源映射文件，而您已在配置文件中排除了这些文件。

在配置中：

new webpack.SourceMapDevToolPlugin({
  exclude: ['popper.js']
})

应该替换为

new webpack.SourceMapDevToolPlugin()

另外，尝试在 webpack 配置文件中添加 devtool: 'eval-source-map',