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

【问题标题】：How to change all href and src paths on webpack building?如何更改 webpack 构建中的所有 href 和 src 路径？
【发布时间】：2019-10-15 20:20:37
【问题描述】：

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

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

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

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

并通过 href 和 url 接收相同的内容。

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

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

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

【问题讨论】：

标签： javascript webpack pug-loader

【解决方案1】：

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

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

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

【讨论】：