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

Question

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

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

在我构建这个项目之后，我想收到这个：

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

并接收相同的 href 和 url。

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

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

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

Answer 1

您可以publicPath在 上设置file-loader，只要正则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