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

只要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

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

1 个答案: