How to serve images using webpack? - html

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.

Answer 2

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?
No, publicPath is where the static files (production build) on your server are served from, and webpack is going to require all other chunks using that prefix.
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?
webpack-dev-server servers files from memory, all files compiled.
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.
Not needed.
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?
You import your images like: import MyImage from './cat-image.png.
And puts on the src attr in the img tag.
<img src={MyImage} />
Webpack will see the import (you have to have file-loader installed and configured on webpack config file) and will parse it. All those parsed images are going to be outputted to the destination folder (dist or whatever you had configured on your output).