Answer the question
In order to leave comments, you need to log in
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'
]
}
]
}
}
import './style.sass';
import module from './module.js';
const app = document.querySelector('#app');
app.textContent = module('Hello from webpack test');
console.log('Hello');
Answer the question
In order to leave comments, you need to log in
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question