index.html在不同文件夹时的webpack-dev-server路径publicpath配置

Question

我尝试使用 path、publicpath、contentBased 解决这个问题，但没有成功。（仅当 bundle.js 和 index.html 在同一文件夹中时有效）

环境：Webpack 5 + webpack-dev-server + react。

问题： 无法在 wp 开发服务器中正确加载应用程序，要么显示内容文件夹，要么不热重载。
如果在同一个文件夹中生成 html 和捆绑包，这工作正常，但出于某种原因，我必须将它们保存在不同的文件夹中。

文件夹结构

dist\bundle.js
dist\style.css
public\index.html   (generated by HTML-webpack-plugin)
public\....         (other files)

webpack 配置

output: {
   path: path.resolve(..., 'dist')     //also tried to generate dist inside public
   filename: bundle.js
   //publicPath: path.resolve(..., 'dist') //etc
}
devServer: {
  contentBase: path.resolve(..., 'public')
}

我尝试了多种组合但没有成功，我想保留 html 文件的单一版本，并且 避免为开发版本手动修改 src 。

谁能指导正确配置。

Answer 1

contentBase 接受一个数组，像这样：

module.exports = {
  // ...
  devServer: {
    // ...
    contentBase: [
      path.join(RootPath, 'public'),
      path.join(RootPath, 'dist')
    ]
    // ...
  }
  // ...
};

需要注意的一件重要事情是 output.publicPath 在这里也起着至关重要的作用。

默认情况下（假设您的 target 是 web（默认）或 webWorker），output.publicPath 设置为 'auto'，这意味着它根据您的要求 bundle.js 确定 url 以获取块。在大多数情况下都可以正常工作。

但是，如果您的 bundle.js 本身是使用模糊的相对路径检索的（例如，OP 从 ../dist/bundle.js 检索它），那么 'auto' 将不起作用，您可能想要使用绝对路径手动设置 output.publicPath（正如 OP 最终所做的那样）。

index.html在不同文件夹时的webpack-dev-server路径publicpath配置

webpack-dev-server path publicpath configuration when index.html is in different folders

webpack

webpack-dev-server

webpack-5