Webpack Serve不将JS插入index.html

Question

你好，

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

在过去的一个半小时里，我尽了一切努力来解决这个问题，但都无济于事，我非常感谢任何帮助。此外，如果有一种方法可以利用我的Rust后端进行热重新加载，那将是一个更好的解决方案：(。

Answer 1

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

例如，输出的publicPath是/:

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

而您的devServer的输出是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,
},