G
G
graydev2021-06-03 15:06:58
webpack
graydev, 2021-06-03 15:06:58

How to force Webpack dev server to reload the page on fixed errors?

Hello!
I have such a problem: if I make a mistake in the js file, it will fly to the browser and after that the webpack will not reload the page, even if the error is fixed. How can I fix this so that if there is an error, it falls into the overlay, and when it is fixed, the page reloads?

webpack.config.js

const path = require('path');
const fs = require('fs');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

const mode = process.env.NODE_ENV || 'development';
const target = process.env.NODE_ENV === 'production' ? 'browserslist' : 'web';

module.exports = {
  entry: {
    index: path.resolve(__dirname, 'index.js')
  },
  output: {
    filename: '[name].min.js'
  },
  target: target,
  mode: mode,
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    port: 9000,
    open: true,
    hot: true,
    liveReload: true
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.resolve(__dirname, 'index.pug'),
      scriptLoading: 'blocking'
    }),
    new MiniCssExtractPlugin({
      filename: 'style.min.css'
    })
  ],
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      },
      {
        test: /\.pug$/,
        use: 'pug-loader'
      },
      {
        test: /\.sass$/,
        use: [
          MiniCssExtractPlugin.loader,
          'css-loader',
          'sass-loader'
        ]
      }
    ]
  }
}


index.js

import './style.sass';

import module from './module.js';

const app = document.querySelector('#app');

app.textContent = module('Hello from webpack test');

console.log('Hello');


If you change app.textContent to pp.textContent, then an error occurs in the browser, if you correct it back, then the page does not reload without manual reload

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question