Webpack HtmlWebpackPlugin输出路径问题：如何将CSHTML生成到模板同目录？

我来帮你分析问题根源，再给出具体的解决办法：

问题原因 #

你当前的配置里，output.path被设置为Client/IGNOREdevjunk/（对应绝对路径path.resolve(__dirname, "IGNOREdevjunk/")），而HtmlWebpackPlugin的filename用了手动拼接的相对路径${webdirectory}/Views/Health/Index.cshtml。Webpack会默认把filename的相对路径拼接在output.path之后，再加上你直接用字符串拼接路径时，../没有被正确解析为层级上移，最终就导致文件被生成到了Client/IGNOREdevjunk/Application/Web/...这个非预期路径。

解决方案 #

核心思路是给HtmlWebpackPlugin的filename指定绝对路径，让Webpack跳过output.path的拼接逻辑，直接输出到目标目录。具体修改如下：

先确保配置文件顶部引入了path模块，然后调整路径相关的定义：

const path = require('path');
// 把相对路径转为绝对路径，避免层级解析错误
const webdirectory = path.resolve(__dirname, "../Application/Web");

module.exports = {
  // ...其他配置项
  plugins: [
    new HtmlWebpackPlugin({
      inject: "body",
      // 直接指定生成文件的绝对路径
      filename: path.resolve(webdirectory, "Views/Health/Index.cshtml"),
      template: path.resolve(webdirectory, "Views/Health/Index_Template.cshtml"),
      minify: false
    }),
  ],
  output: {
    path: path.resolve(__dirname, "IGNOREdevjunk/"),
    publicPath: "https://localhost:8080/"
  }
};

为什么这样有效？ #

当HtmlWebpackPlugin的filename是绝对路径时，Webpack会忽略output.path的拼接规则，直接将文件写入你指定的绝对路径下，这样就能精准生成到Application/Web/Views/Health/Index.cshtml的期望位置。同时用path.resolve处理路径，还能避免手动拼接字符串带来的跨平台路径分隔符问题，让配置更健壮。

内容的提问来源于stack exchange，提问作者Crust3