html-withimg-loader设置图片路径,webpack4系列教程，withimg-loader 如何处理html中的图片？...

HTML-withimg-loader是一个webpack loader，它可以帮助我们在HTML文件中处理图片路径。在使用HTML-withimg-loader之前，我们需要安装html-withimg-loader和html-loader。下面是一些简单的步骤：

1. 安装依赖：

npm install html-withimg-loader html-loader --save-dev

2. 在webpack配置中添加loader

module: {
  rules: [
    {
      test: /\.html$/,
      use: [
        {
          loader: "html-withimg-loader",
          options: {
            // 设置图片路径
            img: {
              attrs: ['img:src', 'link:href'],
              minimize: true
            }
          }
        },
        {
          loader: "html-loader",
          options: {
            minimize: true,
            removeComments: false,
            collapseWhitespace: false
          }
        }
      ]
    }
  ]
}

3. 在HTML文件中使用图片

<img src="./images/test.png">

在使用HTML-withimg-loader之后，我们可以在HTML文件中使用相对路径来引用图片，HTML-withimg-loader会自动将图片路径转换成base64编码，或者将图片复制到输出目录，并修改图片路径。

希望我的回答能够帮助到你。如果你有任何疑问，请随时问我。