Всем привет!
У меня такая проблема: если в js файле я допущу ошибку, то она улетит в браузер и после этого вебпак не будет перезагружать страницу, даже если ошибка исправлена. Как можно это поправить так, чтобы при наличии ошибки она падала в overlay, а при исправлении страница перезагружалась?
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');
Если изменить app.textContent на pp.textContent, то в браузер падает ошибка, если поправить обратно, то страница не перезагружается без ручной перезагрузки