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',
},
},
],
},
}
CodePudding user response:
New answer:
The problem is solved for me after upgrading my webpack-dev-server
version from v3.11.2
to v4.9.1
.
Depending on your preview version, there may be some changes to be made to
devServer
entry inwebpack.config.js
. See the doc if you have errors.
For this to work, the static directory of devServer
should be the same as Webpack's output directory. For the question, it should be dist
instead of src
.
You may need to use HtmlWebpackPlugin to serve an
index.html
in the output folder if you are not already.
devServer: {
static: {
directory: path.join(__dirname, "dist"),
},
// ....
},
Old answer:
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:
Every time you add a new image, stop your development server, run
npm run build
or whatever the command you use to build your project. Then runnpm start
. After that, it works fine.