Anyone used Webpack for a simple ES6, SASS etc. website with NO React? How to insert images in index.html?

[freshsingh]

Hi all

I’ve been using Webpack for several React projects and it all works fine. Been able to use ‘require’ in order to import images correctly and used ‘require’ for the favicon which was then able to be loaded into index.html as normal.

So today I thought I would try Webpack on a non-React project (basic ES6 and Sass) with an index.html, src folder containing images folder, styles folder and index.js. However, I am unable to load in images as I would normally in index.html (src = ‘./path/to/image’). I guess this is because Webpack is handling the image within the src folder. But I have tried require within the index.js and it doesn’t seem to work…

Any way around this? Or do I just have to place the images folder outside of the src folder? Wouldn’t that defeat the purpose of Webpack bundling?

For a novice like me, I have found it tough to find Webpack examples not involving React.

Any help would be greatly appreciated.

Thanks

N.B The only way I can get around it is to place the image as a background-image with the main style.scss file…

[freshsingh]

Seem to have fixed this in case anyone is wondering - you need to use html-loader!

{
// HTML LOADER
test: /.html$/,
exclude: /node_modules/,
loader: ‘html-loader’
},

Remember to:

npm install -D html-loader