webpack-dev-server 和 webpack -> 将文件输出到父目录并让 webpack-dev-server 热重载仍然有效

Question

我们的 Web 应用程序具有以下结构：

/src(.sln)
--/ClientSite
--/AdminSite
--/SharedWeb

在 SharedWeb 中，我们有以下文件夹：

--/Client
--/Admin
--/Shared

我们有这种结构是为了用 webpack-dev-server 进行热重载，无论我们编辑什么文件，只有一个 package.json 等。如果有人感兴趣，请讨论我们为什么选择这种结构的原因：

到目前为止一切正常，但现在我们需要部署我们的解决方案，我们需要将 bundle.js 导出到正确的站点。

在webpack.client.config.js中：

热重载工作正常，但脚本文件未正确导出到站点：

output: {
    filename: "./Scripts/dist/[name].bundle.js",
},

脚本文件导出正确但热重载停止工作：

output: {
    filename: "../ClientSite/Scripts/dist/[name].bundle.js",
},

根据文档使用路径和文件名的正确方法，没有任何效果：

output: {
    path: path.resolve(__dirname, "Scripts/dist/"),
    filename: "[name].bundle.js"
}

脚本文件导出正确，但热重载不起作用。如果我将 webpack 与 --watch 一起使用并手动重新加载 webpack-dev-server URL 我可以看到更改，但它不会自动重新加载。

output: {
    path: path.resolve(__dirname, "../ClientSite/Scripts/dist/"),
    filename: "[name].bundle.js"
},

Answer 1

这样解决，publicPath 是自动更新在 webpack-dev-server 中工作的关键。

output: {
    path: path.resolve(__dirname, "../ClientSite/Scripts/dist/"),
    publicPath: '/Scripts/dist',
    filename: "[name].bundle.js"
},

webpack-dev-server and webpack -> output file to parent directory and have webpack-dev-server hot reloading still working