Webpack不把图片放在dist文件夹中

Question

我有个混血儿。Mixin用于创建块，并将其作为参数传递给任何图像名称。

mixin img({imageSrc: ""} = {})
  .img(src="./img/" + imageSrc + ".jpg")

因此，我希望webpack要么把这个图像放在dist/img/中，要么处理，然后用它的base64格式替换这个路径。

由于我需要在sass和pug中保存相对路径，所以我使用url-loader。所以我当前的帕格和图像配置如下所示：

module: {
  rules: [{
    test: /\.pug$/,
    loader: 'pug-loader
  }, {
    test: /\.(jp(e*)g|png|svg)$/,
    use: [{
      loader: "url-loader",
      options: {
        outputPath: "images/"
      }
    }]
  }]
}

感谢你的帮助，因为我的想法快用完了

Answer 1

我不认为url-loader有一个outputPath选项，它只是输出到Webpack配置的output.path。假设您的output.path是dist (默认)，您可以通过指定name选项(如下所示)将文件转到dist/img：

options: {
  name: 'img/[name].[ext]?[hash]'
}