“无法获取/” webpack-dev-server

Question

为了防止这个问题被标记为重复，我想提一下我已经提到了一些类似的 SO 问题并尝试了接受/最赞的答案，但这些没有帮助：

1. webpack-dev-server '无法获取 /'
2. 无法获取/-localhost 8080 无法与 webpack 开发服务器一起使用
3. 无法获取/在 webpack 中运行 hello world 时出错
4. 插件未在 webpack 配置文件中定义

我正在尝试按照https://www.javatpoint.com/rxjs-first-example上的教程创建一个使用 RxJs 的简单 Javascript 应用程序。

当我启动 webpack-dev-server 时，出现“Cannot GET /”错误。

我已将此处的代码提交到 git 存储库，以便轻松复制。 以下是步骤：

git clone https://github.com/phalgunv/basic-rxjs-starter.git
npm run start

打开“http://localhost:8080/”，出现错误

我在这里错过了什么？

Answer 1

您的设置是正确的； 根据您在 Webpack 中的文件名设置，您的包位于http://localhost:8080/bundle.js

如果你想复制index.html文件来提供你的包的内容，你可能想看看这里的HtmlWebpackPlugin ： https://webpack.js.org/plugins/html-webpack-plugin/

Answer 2

感谢 @dave-kiss 指出了正确的方向，关键思想是使用HtmlWebpackPlugin和HtmlLoader 。

我已将更改提交到分支 bug-fix-content-not-served 中的存储库https://github.com/phalgunv/basic-rxjs-starter.git以供参考。

以下是遵循的步骤：

1. 安装 html-load

   npm 安装 --save-dev html-loader html-webpack-plugin

2. 更新 webpack.config.js modules->rules with html-loader

   模块：{ 规则：[ { 测试：/.tsx?$/，使用：“ts-loader”，排除：/node_modules/，}，{ 测试：/.html$/，加载器：“html-loader”，} , ], },

3. 使用 HtmlWebpackPlugin 更新 webpack.config.js

   插件：[ new HtmlWebpackPlugin({ template: "src/index.html", }), ],

4. 从 index.html 中删除<script>标签

检查提交 - https://github.com/phalgunv/basic-rxjs-starter/commit/15d0779614ccd0428bb47bc308bea8f7f0509ea0以供参考。