Webpack: Loading images from html templates

  1. Yes, you will have to do so for loading images from different path.
  2. I had similar issue and I resolved this using file loader:

.

loaders: [{
  // JS LOADER
  test: /\.js$/,
  loader: 'babel-loader?optional[]=runtime',
  exclude: /node_modules/
}, {
  // ASSET LOADER
  test: /\.(woff|woff2|ttf|eot)$/,
  loader: 'file-loader'
},
{
  //IMAGE LOADER
  test: /\.(jpe?g|png|gif|svg)$/i,
  loader:'file-loader'
},
{
  // HTML LOADER
  test: /\.html$/,
  loader: 'html-loader'
},
{
  //SCSS LOADER
  test: /\.scss$/,
  loaders: ["style-loader", "css-loader", "sass-loader?indentedSyntax"]
}
]

Good Luck


If you are using HTML templates in Webpack 2, in addition to use the file-loader you need to change in your HTML:

<img src="../images/foo.png" />

to this

<img src=<%=require("../images/foo.png")%> />