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

Question

我运行“手表”来执行 webpack 开发服务器"watch": "webpack-dev-server --progress"它编译时没有在终端中检测到问题。但是，当我转到http://localhost:8080时，我收到一条错误消息“无法获取”我创建了一个沙盒。到目前为止，我尝试在 webpack.config.js 中添加 writeToDisk: true 并包括 svg“file-loader”和 css“css-loader”的加载器，这纠正了我在不使用 css 加载器时遇到的另一个错误。我也尝试将端口更改为 3000。不确定这与解决此问题有多大关系，但我正在使用 webstorm ide。更新：我通过将 index.html 和 manifest.json 移动到 src 文件夹来解决这个问题。我现在的问题是，是否可以在不移动 index.html 和清单到与 webpack.config.js 相同的文件夹中的情况下完成这项工作？如果可能的话，我宁愿将 index.html 保留在公用文件夹中。

Answer 1

我建议阅读 webpack 关于Output Management的文档。

对于你的问题：

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

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

    new HtmlWebpackPlugin({

      template: 'path/to/index.html'

    })