image - Webpack 不会将图像放在 dist 文件夹中

Question

我有一个哈巴狗混合。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

Answer 1

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

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