Question

我正在使用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加载。

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

我不确定我做错了什么？

Answer 1

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

Answer 2

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

Webpack处理时，Image的src属性等于“[object Object]”

2 个答案: