Webpack Serve 未将 JS 插入 index.html

【问题标题】：Webpack Serve not inserting JS into index.htmlWebpack Serve 未将 JS 插入 index.html
【发布时间】：2021-06-05 05:52:17
【问题描述】：

早安，

我设置 Webpack 以使用 webpack --mode production --config webpack.config.production.js 为 /dist/ 创建我的 React 应用程序的优化构建，它会自动将正确的初始脚本插入到 index.html 的头部（webpack.config.production.js，index.html）。这可以使用我的 Rust 后端来提供生产构建的文件。但是，我使用webpack serve --mode development --config webpack.config.js 启用热重新加载的脚本不会将命名脚本插入到 HTML 文件中，因此无法加载 (webpack.config.js)。

在过去的一个半小时里，我尝试了所有我能找到的方法来解决这个问题，但无济于事，如果能提供任何帮助，我将不胜感激。此外，如果有办法利用我的 Rust 后端进行热重载，那将是一个更好的解决方案:)。

【问题讨论】：

标签： javascript reactjs webpack

【解决方案1】：

@Robert 走在了正确的轨道上，问题是你的webpack.config.js 中有两个不同的publicPaths：

例如，您的output's publicPath 是/：

...
output: {
  filename: "static/[name].[fullhash].js",
  path: path.resolve(__dirname, "dist"),
  publicPath: "/",
},

而你的devServer's output 是http://localhost:3000/dist/：

...
devServer: {
  contentBase: path.join(__dirname, "public/"),
  port: 3000,
  publicPath: "http://localhost:3000/dist/",
  open: true,
},
...

相反，它们应该是相同的路径——在这种情况下，它们应该是 /（或者，您可以从 devServer 中删除 publicPath 属性，它也会起作用）：

devServer: {
  contentBase: path.join(__dirname, "public/"),
  port: 3000,
  // publicPath: "/",
  open: true,
},

【讨论】：