Как разрешить тегу `HtmlWebpackPlugin` использовать тег` img src`, определенный в шаблоне? - PullRequest
Новая
       16

Как разрешить тегу `HtmlWebpackPlugin` использовать тег` img src`, определенный в шаблоне?

0 голосов
/ 02 февраля 2019

Я использую плагин 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' }
...