Webpack 不会将图像放在 dist 文件夹中答案

【问题标题】：Webpack doesn't place images in dist folderWebpack 不会将图像放在 dist 文件夹中
【发布时间】：2019-10-23 23:01:29
【问题描述】：

我有一个哈巴狗混合。 Mixin 用于使用作为参数传递的任何图像名称来创建块。

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

因此，我希望 webpack 要么将此图像放在 dist/img/ 中，要么对其进行处理并将此路径替换为 base64 格式。

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

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

感谢您的帮助，因为我的想法已经不多了：c

【问题讨论】：

标签： image webpack pug-loader

【解决方案1】：

我认为url-loader 没有outputPath 选项，它只是输出到您的Webpack 配置的output.path。假设您的output.path 是dist（默认），您可以通过指定name 选项将文件转到dist/img，例如：

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

【讨论】：

同意...最好使用文件加载器