Currently, I have a webpack 5 project that requires several svg images and a background image. The svg image is encoded into the template.html file. The background image is referenced in the style.css file. When I run the build, no images are built on the web page. They remain in hashed form (even if I use custom names in file loader tests.
The following is the current webpack configuration file:
const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry: { index: './src/js/index.js', }, plugins: [ new HtmlWebpackPlugin({ template: './src/template.html', }), ], devtool: 'inline-source-map', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'docs'), }, module: { rules: [ { test: /\.css$/i, use:['style-loader','css-loader'], }, { test: /\.(png|svg|jpg|jpe?g|gif)$/i, use: [ { loader: 'file-loader', options: { name: '[name].[ext]', outputPath: 'assets/images/' } } ] }, { test:/\.html$/, use: [ 'html-loader' ] }, ], }, };
The following is a snippet showing how svg is implemented
<div class="studyTime"> <div id="timeManager"> <div id="toDoButtons"> <button id="new"><img src="./assets/images/add.svg" alt=""></button> <button id="clear"><img src="./assets/images/clear.svg" alt=""></button> </div> <div id="todo"> </div> </div> <img class="openDrawer" id="timeOpen" src="./assets/images/left.svg" alt=""> </div> <div class="clock"> <div class="clock-face"> <div class="core"></div> <div class="hand" id="hour-hand"></div> <div class="hand" id="min-hand"></div> <div class="hand" id="second-hand"></div> </div> </div>
Finally, this is an image of the program when it was built: Image error while building
I've tried using the file loader format, as well as removing it. My file structure looks like this:
File structure
I don't get any errors, the image appears in the bundled code but in hashed form and does not appear in the live website.
You need html-loader and html webpack plugin. It will rewrite your html file with a hashed name.
and replace the svg rule with