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

Question

我有一个网站，主要用 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/"
}

我很乐意收到任何解决方案、想法或建议。

Answer 1

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

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

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

更多信息:https://webpack.js.org/loaders/file-loader/#publicpath