Webpack - net::ERR_ABORTED 404（未找到）答案

【问题标题】：Webpack - net::ERR_ABORTED 404 (Not Found)Webpack - net::ERR_ABORTED 404（未找到）
【发布时间】：2021-01-06 20:24:41
【问题描述】：

我正在学习 Webpack，在运行 Webpack 和 npm run build 创建一个 bundle.js 文件，然后导入 Post 模块，然后导出到 Index.js 文件，然后将 bundle.js 文件包含到 index.html 文件中，这是我的代码

Post.js

export default class Post {
    constructor(title) {
        this.title = title
        this.date = new Date()
    }

    toString() {
        return JSON.stringify({
            title: this.title,
            date: this.date.toJSON()
        })
    }
}

index.js

import Post from "./Post"

const post = new Post('Webpack Post Title')

console.log('Post to String', post.toString())

index.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="analytics.js"></script>
</head>
<body>
    <div class="container">
        <h1>Webpack Course</h1>
    </div>

    <script src="bundle.js"></script>
</body>
</html>

之后我用实时服务器打开文件，它给出了一个错误

GET http://127.0.0.1:5500/src/bundle.js net::ERR_ABORTED 404（未找到）

未经检查的 runtime.lastError：消息端口在收到响应之前关闭。

webpack.config.js

const path = require('path');

module.exports = {
    mode: "development",
    entry: "./src/index.js",
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    }
}

package.json

{
  "name": "tutorial-minin",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Suro Zakaryan",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^5.11.1",
    "webpack-cli": "^4.3.1"
  }
}

【问题讨论】：

标签： javascript node.js webpack server module

【解决方案1】：

将<base href="/"> 添加到您的 index.html head 应该可以解决问题。

【讨论】：