Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

157
Views
Webpack, images disappear after css changes, using webpack-dev-server

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',
        },
      },
    ],
  },
}
about 4 years ago · Juan Pablo Isaza
2 answers
Answer question

0

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 devServer is the same as Webpack's output directory. Then 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, and then run npm 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 devServer entry in webpack.config.js. See the doc if you have errors.

about 4 years ago · Juan Pablo Isaza Report

0

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.

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!