0

我正在使用 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.

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

我不确定我做错了什么？

4

2 回答 2

1 
  {
    test: /\.(png|jpe?g|gif)$/i,
    use: [
      {
        loader: "file-loader?name=images/[name].[ext]",
        options: {
          esModule: false
        }
      }
    ]
  }
于 2020-01-05T22:36:06.693 回答
0

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

于 2017-10-01T10:47:50.117 回答