javascript - 如何更改Webpack构建上的所有href和src路径？

我有一个网站，大部分使用pug(html预处理器)编写。我使用output.publicPath等于'/'，因此我可以在开发模式下运行webpack并轻松工作，将项目文件夹视为根目录，但是每个href，src和url都是绝对路径。在构建项目时，我想通过在乞讨中添加一些节点(例如，让我们使用'/ path / to /')来更改每个路径。例如，我有一张图片

img(src="/img/image.jpg")

在构建此项目之后，我想收到以下信息:

<img src="/path/to/img/image.jpg">

并使用hrefs和url接收相同的内容。

我做了一个webpack构建配置并将output.publicPath设置为'/ path / to /'，但是它更改了链接的CSS和JS文件的路径:

mode: "production",
  output: {
  publicPath: "/HTMLPractice/dist/"
}

我将很高兴收到任何解决方案，想法或建议。

最佳答案

您可以在publicPath上设置file-loader，只要file-loader正则表达式包含图像文件即可。

在您的webpack.config.js规则中:

     {
        test: /\.(png|jpe?g|gif)$/i,
        loader: 'file-loader',
        options: {
          publicPath: 'some/path',
        },
      },