How to serve images using webpack?

Question

I've read a bunch of stuff on this, but I still can't seem to serve my files the way I want.

my file structure:

root/
  /dist/            <=  here is where webpack is putting bundles
  /public/          <=  here are where all my images are stored
  /src/             <=  here are my source files
     template.html  <= some files under src
     index.js
webpack.config.js   <=  files under root
index.html          <=  html now at root by webpack

My webpack.config has htmlWebpackPlugin configured like so:

 new HtmlWebpackPlugin({
     "template": "./src/template.html",
     "filename": "../index.html",        <=  moved up to root?
     "hash": false,
     "inject": true,
     "compile": true,
     "favicon": false,
     "minify": false,
     "cache": true,
     "showErrors": true,
     "chunks": "all",
     "excludeChunks": [],
     "title": "Webpack App",
     "xhtml": true,
     "chunksSortMode": 'none' //fixes bug
     }),

and my output configured like this:

output: {
    filename: '[name].[chunkhash:4].js',
    chunkFilename: '[name].[chunkhash:4].js', //name of non-entry chunk files
    path: path.resolve(__dirname, 'dist'),
    publicPath: "/public"          <=  not really sure about this
},

So the publicPath, as I understand it, is where the "src" property on image elements will be served from throughout the code, correct? So, in my code, I can just put src='/images....' because '/public' will be prepended. Right?

Also, I read something about 'webpack-dev-server' will serve files from that folder (public) too. Does dev server ever look in the webpack-created dist directiory? Or is that completely separate?

So, as you can see, I moved the index.html up to the root. Not sure if I needed to do that, but I'm trying to figure out how to serve my images that I'm calling from within the html itself.

How can I serve my files easily from within the code '/images/....' and also serve them from the html directly? Should I serve the html from the 'public' folder or will that affect the serving of the dist bundles?

Answer 1

With devServer it might be easiest to just mount your assets-directory., webpack-dev-server uses express behind the scenes so:

const express = require('express');
module.exports = {
    ...
    devServer:{
        host: '0.0.0.0',
        port: 8080,
        before(app) {
            app.use('/assets/uploads', express.static(path.resolve('C:\\temp')));
        }
    }
}

I mean, you'll probably do something similar on your production server anyway.

ie. location /assets/uploads { root /var/www/project; }; in nginx or whatever.

---

Another method is to use CopyWebPackPlugin:

new CopyWebpackPlugin(
  [
    {
      from: path.resolve(__dirname, 'public'), 
      to: path.resolve(__dirname, 'dist'),
      ignore: [ 'index.html', ... ]
    }
  ]
),

---

Yet another method could be to add your images to code require('image1.jpg'); somewhere in your entry and add a file-loader and let webpack handle the rest. Webpack is so flexible. If you wonder about the folder-structure, disable webpack-dev-server temporarily so you can see the actual output.

Sorry, I just realized I answered your title question and ignored everything else.