如何让“ HtmlWebpackPlugin”解析模板中定义的“ img src”标签？

Question

我使用HtmlWebpackPlugin插件来解析HTML模板，并产生它为build目录下。我发现它没有拾取模板中定义的img src标签，这意味着那里引用的图像没有复制到build目录中。

我也试图在模板使用require，但它也不起作用：<img src="<%= require('../images/image.png') %>" />

我知道我可以使用copy-webpack-plugin将映像目录复制到build，但是我正在寻找一种更好的方法来做到这一点。

下面是我的webpack4配置。

{ entry: { index: './odo' },
  output:
   { filename: 'tbc_odo.js',
     sourceMapFilename: 'tbc_odo.map',
     path: './build',
     publicPath: '/' },
  module: { rules: [ 
     [
        {
          test: /\.js?$/,
          exclude: /(node_modules)/,
          loader: 'babel-loader'
        },
        {
          test: /\.(s*)css$/,
          use: ExtractTextPlugin.extract({
            fallback: 'style-loader',
            use: ['css-loader', 'sass-loader']
          })
        },
        {
          test: /\.(png|jp(e*)g|svg)$/,
          use: [
            {
              loader: 'url-loader',
              options: {
                limit: 8000, // Convert images < 8kb to base64 strings
                name: 'images/[hash]-[name].[ext]'
              }
            }
          ]
        },
        {
          test: /\.html$/,
          use: [
            {
              loader: 'html-loader'
            }
          ]
        }
      ]
 },
  plugins:
     [
      new webpack.IgnorePlugin(/locale/, /moment$/),
  new webpack.LoaderOptionsPlugin({ debug: true }),
  new webpack.DefinePlugin({
    CONFIG: JSON.stringify(config)
  }),
   new HtmlWebpackPlugin({
    filename: 'odo/index.html',
    template: 'odo/index.html',
    inject: 'body',
    sdk: '/tbc_sdk.js'
  })
      ],
  mode: 'development',
  devtool: 'inline-source-map' }