在 React.js 2020 中运行 Webpack Config 时无法获取答案

【问题标题】：Cannot Get when running Webpack Config in React.js 2020在 React.js 2020 中运行 Webpack Config 时无法获取
【发布时间】：2020-07-14 14:48:07
【问题描述】：

我运行 'watch' 来执行 webpack dev sever "watch": "webpack-dev-server --progress"

编译后在终端中未检测到问题。但是，当我转到 http://localhost:8080 时，我收到一条错误消息“无法获取”

我创建了一个sandbox。

到目前为止，我尝试在 webpack.config.js 中添加 writeToDisk: true 并包括 svg "file-loader" 和 css "css-loader" 的加载器，这纠正了我在不使用加载器时遇到的另一个错误css。我也尝试将端口更改为 3000。不确定这与解决此问题有多大关系，但我正在使用 webstorm ide。

更新：

我通过将 index.html 和 manifest.json 移至 src 文件夹来解决此问题。

我现在的问题是是否可以在不移动 index.html 和 manifest 到 webpack.config.js 的同一文件夹中的情况下完成这项工作？如果可能的话，我宁愿将 index.html 保留在公用文件夹中。

【问题讨论】：

您能否将 Webpack 配置添加到您的问题中？
当然。我已经添加了 Webpack 配置。

标签： javascript reactjs webpack webpack-dev-server

【解决方案1】：

我建议阅读 webpack 在 Output Management 上的文档。

你的问题：

我现在的问题是是否可以在不移动 index.html 和 manifest 到与 webpack.config.js 相同的文件夹中完成这项工作？

您可以使用官方的HtmlWebpackPlugin 来生成您的index.html 文件。您可以将它指向您自己的文件，无论您想要它在哪里，它还可以让您最终扩展您的代码以从模板生成 html 文件。

    new HtmlWebpackPlugin({
      template: 'path/to/index.html'
    })

【讨论】：