图像的 src 属性在被 Webpack 处理时等于“[object Object]”答案

【问题标题】：Image's src attribute equals "[object Object]" when processed by Webpack图像的 src 属性在被 Webpack 处理时等于“[object Object]”
【发布时间】：2017-10-01 10:43:57
【问题描述】：

我正在使用 Webpack 处理 HTML 和资产，这是最小的webpack.config.js：

const CleanWebpackPlugin = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

const OUTPUT_DIR = __dirname + '/dist';

module.exports = {
  context: __dirname + '/src',
  entry: './index.js',
  module: {
    rules: [
      {
        test: /\.html$/,
        use: {
          loader: 'html-loader'
        }
      },
      {
        test: /\.jpg$/,
        use: {
          loader: 'file-loader',
          options: {
            name: '[name].[ext]'
          }
        }
      }
    ]
  },
  plugins: [
    new CleanWebpackPlugin([
      OUTPUT_DIR
    ]),
    new HtmlWebpackPlugin({
      template: 'index.html'
    })
  ],
  output: {
    filename: '[name].js',
    path: OUTPUT_DIR,
    publicPath: '/'
  }
};

我的来源index.html：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">

  <title>Example Web Page</title>

</head>

<body>

  <img src="image.jpg">

</body>

</html>

问题是在最终的 HTML 文档中，图像标签看起来像这样：<img src="[object Object]">。

我正在使用 html-webpack-plugin 生成输出 HTML，使用我的源 HTML 文档作为模板，该模板是使用 html-loader 加载的。

图像实际上是添加到输出目录中的。

我不确定我做错了什么？

【问题讨论】：

标签： webpack html-webpack-plugin webpack-html-loader

【解决方案1】：

  {
    test: /\.(png|jpe?g|gif)$/i,
    use: [
      {
        loader: "file-loader?name=images/[name].[ext]",
        options: {
          esModule: false
        }
      }
    ]
  }

【讨论】：

没有代码的答案没有什么价值。评论让你的答案更有分量，更有价值

【解决方案2】：

没关系。升级依赖项后（我正在使用 yarn：yarn upgrade），问题就消失了。这是本周末 Webpack 生态系统中的第二个错误（疯狂）。

【讨论】：