I've got a problem with my Webpack config. After tag had been written, the image appears, but devServer remove all the pictures after styles applications right after page reload. And it wouldn't back until path was added again in tag. See this screenshot video to have a better image of what is happening.
webpack.config.js:
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
let mode = 'development'
let target = 'web'
if (process.env.NODE_ENV === 'production') {
mode = 'production'
target = 'browserslist'
}
const plugins = [
new HtmlWebpackPlugin({
template: './index.html',
}),
new MiniCssExtractPlugin({
filename: '[name].[contenthash].css',
}),
]
module.exports = {
mode,
plugins,
target,
context: path.resolve(__dirname, 'src'),
entry: {
main: './main.js',
},
output: {
path: path.resolve(__dirname, 'dist'),
assetModuleFilename: 'assets/[hash][ext][query]',
clean: true,
},
optimization: {
splitChunks: {
chunks: 'all',
},
},
devServer: {
static: {
directory: path.join(__dirname, 'src'),
},
compress: true,
open: true,
hot: true,
port: 3001,
},
resolve: {
extensions: ['.js', '.ts', '.jsx', '.tsx'],
},
module: {
rules: [
{
test: /\.(html)$/,
use: ['html-loader'],
},
{
test: /\.(s[ac]|c)ss$/i,
use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
},
{
test: /\.(png|jpe?g|gif|svg|webp|ico)$/i,
type: mode === 'production' ? 'asset' : 'asset/resource',
},
{
test: /\.(woff2?|eot|ttf|otf)$/i,
type: 'asset/resource',
},
{
test: /\.(js|jsx)?$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
cacheDirectory: true,
},
},
},
{
test: /\.(ts|tsx)?$/,
exclude: /node_modules/,
use: {
loader: 'ts-loader',
},
},
],
},
}
I have the same issue. I realised that images that are imported in JavaScript files with import works fine. The problem is coming from images in HTML files, processed with html-loader. I searched a lot, didn't find why this is happening, but here a way to avoid the issue:
First make sure the static directory of
devServeris the same as Webpack's output directory. Then every time you add a new image, stop your development server, runnpm run buildor whatever the command you use to build your project, and then runnpm start. And after that it would work fine.
Regarding CSS changes, the problem is solved for me after upgrading my webpack-dev-server version from v3.11.2 to v4.9.1. Though when I change a TypeScript file (I'm compiling TypeScript to JavaScript), the problem remains, and the above solution is still valid.
If yo do that version migration, depending on your previous version, there may be some changes to be made to
devServerentry inwebpack.config.js. See the doc if you have errors.
I had a similar issue - I noticed that changing output.clean = false in the webpack.dev.js file resolve the issue when output.path was null.
The answer selected above worked for me as well.