"Cannot GET / " webpack-开发服务器

Question

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

1. webpack-dev-server 'Cannot GET /'
2. Cannot GET / - localhost 8080 not working with webpack dev server

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

当我启动 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 and 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 模块->规则 html-loader

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

3. 使用 HtmlWebpackPlugin

   更新webpack.config.js

   插件：[ 新的 HtmlWebpackPlugin({ 模板：“src/index.html”, }), ],

4. 从 index.html

   中删除 <script> 标签

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