I've created small project which consists of one HTML file and a few assets (images, video, (S)CSS, JS) and I use webpack (latest versions of all installed packages) to optimize and bundle the files. Processing the SCSS and JS files works fine so far, but bundling the images and videos, which are included in the HTML template, does not work as desired.
Problem: When I execute webpack --watch, the images/videos are copied correctly to the dist folder, but only on the first run. If I modify e.g. a SCSS or JS file, the images and videos disappear from the dist folder whereas JS and CSS files are properly generated/updated. If I then edit the HTML template, the images/videos reappear in the dist folder.
The most relevant parts of my code (see below for a link to see/download the project for easier reproduction of the problem):
// webpack.config.js
// ...
const config = {
src: 'src/',
dist: 'dist/',
jsEntry: '/assets/js/main.js',
cssEntry: '/assets/scss/main.scss',
publicPath: '/',
};
const absEntryPath = path.resolve(__dirname, config.src);
module.exports = {
mode: 'production',
entry: {
style: absEntryPath + config.cssEntry,
main: absEntryPath + config.jsEntry
},
output: {
path: path.resolve(__dirname, config.dist),
publicPath: config.publicPath,
filename: 'assets/js/[name].[contenthash:4].min.js',
clean: true
},
plugins: [
new HtmlWebpackPlugin({
template: config.src + 'index.ejs',
cache: false,
// ...
}),
new MiniCssExtractPlugin({
filename: 'assets/css/[name].[contenthash:4].min.css'
}),
// ...
],
module: {
rules: [
// ...
{
// html
test: /\.(html|ejs)$/,
exclude: /[\\/]node_modules[\\/]/,
use: [
{
loader: 'html-loader',
options: {
sources: true,
minimize: false,
esModule: false
}
}
]
},
{
// styles
test: /\.(sa|sc|c)ss$/,
exclude: /[\\/]node_modules[\\/]/,
use: [
// ...
]
},
{
// images
test: /\.(jp(e)?g|png|gif)$/,
use: {
loader: 'file-loader',
options: {
esModule: false,
name: '[name].[contenthash:4].[ext]',
outputPath: 'assets/img/',
publicPath: config.publicPath
}
}
},
{
// video
test: /\.(mp4|mov)$/,
use: {
loader: 'file-loader',
options: {
esModule: false,
name: '[name].[contenthash:4].[ext]',
outputPath: 'assets/video/',
publicPath: config.publicPath
}
}
},
// ...
]
},
// ...
};
<!-- /src/index.ejs -->
<!DOCTYPE html>
<html lang="en">
<!-- ... -->
<body>
<div>
<p>some image</p>
<img src="./assets/img/some-image.jpg">
</div>
<div>
<p>some video</p>
<video controls poster="./assets/video/some-video_poster.png">
<source src="./assets/video/some-video.mp4" type="video/mp4" />
Your browser does not support the video tag.
</video>
</div>
</body>
</html>
Similar behavior has already been described here and here with the recommendation to disable caching for html-webpack-plugin, but as you can see in my webpack.config.js I'm already using cache: false and it doesn't fix the problem.
As a workaround, I'm currently excluding the images/videos from the dist folder cleanup, however this forces me to keep the filenames which I don't really want to due to possible browser caching issues.
Question: How can I prevent the images/videos from disappearing from the dist folder when I edit files other than the HTML template? I would prefer to be able to use hashes in the filenames and not have to exclude the files from the dist folder cleanup.
I've uploaded a stripped down version of the project to Stackblitz, where you can download it. Please note that I do not have a pro account and therefore could not upload pictures/videos. If you want to reproduce the problem, please replace the two images and the video locally.