Почему не работает перезагрузка страницы при каких либо изменениях в файлах?

Начал изучать webpack, столкнулся с проблемой, что при изменении файлов не происходит перезагрузка страницы в браузере, приходиться всегда самому обновлять.

Webpack.common.js

const paths = require('./paths');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
	entry: [paths.src + '/index.js'],
	output: {
		path: paths.build,
		filename: '[name].bundle.js',
	},
	plugins: [
		new CleanWebpackPlugin(),
		new HtmlWebpackPlugin({
			template: paths.src + '/index.html',
		}),
	],
	module: {
		rules: [
			{ test: /\.js$/, exclude: /node_modules/, use: ['babel-loader'] },
			{
				test: /\.(scss|css)$/,
				use: [
					{
						loader: 'style-loader',
					},
					{
						loader: 'css-loader',
						options: { sourceMap: true, importLoaders: 1 },
					},
					{
						loader: 'sass-loader',
						options: { sourceMap: true },
					},
				],
			},
		],
	},
};


webpack.dev.js

const paths = require('./paths');
const webpack = require('webpack');
const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');

module.exports = merge(common, {
	mode: 'development',

	devtool: 'inline-source-map',

	devServer: {
		historyApiFallback: true,
		contentBase: paths.build,
		open: true,
		compress: true,
		hot: true,
		port: 8080,
	},

	plugins: [new webpack.HotModuleReplacementPlugin()],
});


paths.js
const path = require('path')

module.exports = {
  // Source files
  // Исходники
  src: path.resolve(__dirname, '../src'),

  // Production build files
  // Директория для файлов сборки
  build: path.resolve(__dirname, '../dist'),

  // Static files that get copied to build folder
  // Статические файлы, которые будут скопированы в директорию для файлов сборки
  public: path.resolve(__dirname, '../public'),
}


package.json

{
  "name": "excel",
  "version": "1.0.0",
  "description": "Pure JS Excel app",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "cross-env NODE_ENV=development webpack serve --config config/webpack.dev.js",
    "build": "cross-env NODE_ENV=production webpack --config config/webpack.prod.js"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/rostik32/excel.git"
  },
  "keywords": [
    "js",
    "javascript",
    "excel"
  ],
  "author": "Rostislav Bardasshov <atelier943@gmail.com>",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/rostik32/excel/issues"
  },
  "homepage": "https://github.com/rostik32/excel#readme",
  "browserslist": "> 0.25%, not dead",
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@babel/plugin-proposal-class-properties": "^7.12.1",
    "@babel/preset-env": "^7.12.7",
    "babel-loader": "^8.2.2",
    "clean-webpack-plugin": "^3.0.0",
    "copy-webpack-plugin": "^6.3.2",
    "cross-env": "^7.0.2",
    "css-loader": "^5.0.1",
    "html-webpack-plugin": "^4.5.0",
    "mini-css-extract-plugin": "^1.3.1",
    "optimize-css-assets-webpack-plugin": "^5.0.4",
    "sass": "^1.29.0",
    "sass-loader": "^10.1.0",
    "style-loader": "^2.0.0",
    "webpack": "^5.9.0",
    "webpack-cli": "^4.2.0",
    "webpack-dev-server": "^3.11.0",
    "webpack-merge": "^5.4.0"
  },
  "dependencies": {
    "@babel/polyfill": "^7.12.1"
  }
}
  • Вопрос задан
  • 279 просмотров
Пригласить эксперта
Ответы на вопрос 1
Возможно, потому что включен Hot Module Replacement, которые заменяет модули на лету без перезагрузки страницы. Этот вариант альтернатива обычной перезагрузке страницы, и, вероятно, поэтому второе не работает.

Попробуйте отключить Hot Module Replacement.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы