Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

162
Vistas
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 Respuestas
Responde la pregunta

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 Denunciar

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 Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda