webpack-dev-server 和 webpack -> 输出文件到父目录，并且 webpack-dev-server 热重载仍然有效答案

【问题标题】：webpack-dev-server and webpack -> output file to parent directory and have webpack-dev-server hot reloading still workingwebpack-dev-server 和 webpack -> 输出文件到父目录，并且 webpack-dev-server 热重载仍然有效
【发布时间】：2018-06-25 04:26:53
【问题描述】：

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

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

在SharedWeb 我们有以下文件夹：

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

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

Shared react front end components -> Separate project with TypeScript -> Visual Studio 2017

到目前为止一切正常，但现在我们需要部署我们的解决方案，我们需要将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"
},

【问题讨论】：

标签： javascript json webpack webpack-dev-server webpack-hmr

【解决方案1】：

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

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

https://github.com/webpack/docs/wiki/configuration#outputpublicpath

【讨论】：