Обновил webpack4 до webpack5
Выходит сообщение в консоль браузера при изменении файла при разработке и hotreload webpack dev server. Т.е. при запуске npm start все работает хорошо, но как только я изменю что-то в любом файле, то выходит это сообщение:
Update failed: ChunkLoadError: Loading hot update chunk app failed.
Моя конфигурация webpack.config.ts
import { CleanWebpackPlugin } from 'clean-webpack-plugin';
import HtmlWebpackHarddiskPlugin from 'html-webpack-harddisk-plugin';
import HtmlWebpackPlugin from 'html-webpack-plugin';
import MiniCssExtractPlugin from 'mini-css-extract-plugin';
import OptimizeCSSAssetsPlugin from 'optimize-css-assets-webpack-plugin';
import path from 'path';
import webpack from 'webpack';
const nodeEnv = (process.env.NODE_ENV as 'development' | 'production' | 'none') || 'development';
const isProd = nodeEnv === 'production';
const pathList = {
dist: path.resolve(__dirname, 'www/build'),
public: path.resolve(__dirname, 'www'),
src: path.resolve(__dirname, 'src'),
};
const getModePlugins = () => {
return isProd
? [
new CleanWebpackPlugin({
dry: false,
verbose: true,
}),
new MiniCssExtractPlugin({
filename: 'styles.[contenthash:5].min.css',
}),
new OptimizeCSSAssetsPlugin(),
]
: [new webpack.HotModuleReplacementPlugin()];
};
const config: webpack.Configuration = {
mode: nodeEnv,
entry: {
app: path.resolve('src/'),
vendor: ['react', 'react-dom'],
},
output: {
filename: '[name].[fullhash:5].min.js',
path: pathList.dist,
publicPath: '/build/',
},
resolve: {
extensions: ['.es', '.js', '.jsx', '.ts', '.tsx'],
modules: [pathList.src, path.resolve(__dirname, './node_modules')],
},
plugins: [
new HtmlWebpackPlugin({
alwaysWriteToDisk: true,
filename: path.resolve(pathList.public, './index.html'),
inject: true,
template: path.resolve(pathList.src, './index.htm'),
}),
new HtmlWebpackHarddiskPlugin(),
...getModePlugins(),
],
optimization: {
splitChunks: {
cacheGroups: {
defaultVendors: {
test: /[\\/]node_modules[\\/]/,
priority: -10,
reuseExistingChunk: true,
},
},
},
},
module: {
rules: [
{
test: /\.html$/,
use: {
loader: 'file-loader',
options: { name: '[name].[hash:5].[ext]' },
},
},
{
test: /\.(es|ts|tsx|js|jsx)?$/,
exclude: /node_modules|lib/,
use: {
loader: 'babel-loader',
options: { cacheDirectory: true },
},
},
{
test: /\.(es|ts|tsx|js|jsx)?$/,
enforce: 'pre',
use: ['source-map-loader'],
},
{
test: /\.css$/,
include: /node_modules/,
use: ['style-loader', 'css-loader'],
},
{
test: /\.less$/,
use: [
isProd ? MiniCssExtractPlugin.loader : 'style-loader',
'css-loader',
{
loader: 'less-loader',
options: {
lessOptions: {
javascriptEnabled: true,
},
},
},
],
},
{
test: /\.(ttf|eot|woff|woff2)(\?[a-z0-9]+)?$/,
use: {
loader: 'file-loader',
options: { name: 'fonts/[name].[hash:5].[ext]' },
},
},
{
test: /\.(jpe?g|png|gif)$/i,
use: ['url-loader?limit=5000&name=images/build/[name].[ext]'],
},
{
test: /.*\.svg$/i,
use: [
'@svgr/webpack',
{
loader: 'file-loader',
options: { name: 'img/[name].[hash:5].[ext]' },
},
],
},
],
},
devServer: isProd
? {}
: {
contentBase: pathList.public,
disableHostCheck: true,
historyApiFallback: true,
host: '0.0.0.0',
hot: true,
port: 8000,
},
devtool: isProd ? false : 'eval',
};
export default config;
package.json
{
"scripts": {
"build": "cross-env NODE_ENV=production webpack -p --progress --config webpack.config.ts",
"start": "cross-env NODE_ENV=development webpack serve",
"lint": "eslint --ext .ts,.tsx src",
"lint:fix": "eslint --ext .ts,.tsx src --fix",
"prettier:fix": "prettier --write src/"
},
"dependencies": {
"@ant-design/compatible": "^1.0.8",
"@ant-design/icons": "^4.3.0",
"@babel/runtime": "^7.12.5",
"@geoman-io/leaflet-geoman-free": "^2.7.0",
"@turf/boolean-contains": "^6.0.1",
"@turf/difference": "^6.0.2",
"@turf/kinks": "^6.2.0",
"@types/geojson": "^7946.0.7",
"@types/history": "^4.7.8",
"@types/leaflet": "^1.5.12",
"@types/leaflet-geosearch": "^2.7.0",
"@types/moment": "^2.13.0",
"@types/react-leaflet": "^2.5.2",
"@types/react-leaflet-markercluster": "^2.0.0",
"@types/react-router-dom": "^5.1.7",
"@types/webpack-env": "^1.16.0",
"antd": "^4.10.2",
"axios": "^0.21.1",
"classnames": "^2.2.6",
"history": "^4.10.1",
"http-status": "^1.5.0",
"leaflet": "1.6.0",
"leaflet-geosearch": "^2.7.0",
"leaflet-routing-machine": "^3.2.12",
"leaflet.markercluster": "^1.4.1",
"lodash.debounce": "^4.0.8",
"lodash.isequal": "^4.5.0",
"lodash.uniqby": "^4.7.0",
"lodash.uniqueid": "^4.0.1",
"mobx": "^6.0.4",
"mobx-react": "^7.0.5",
"mobx-react-lite": "^3.1.6",
"mobx-react-router": "^4.1.0",
"mobx-utils": "^6.0.3",
"moment": "^2.29.1",
"moment-timezone": "^0.5.32",
"normalize.css": "^8.0.1",
"point-in-polygon": "^1.0.1",
"query-string": "^6.13.8",
"react": "^17.0.1",
"react-baron": "^1.0.0",
"react-dom": "^17.0.1",
"react-leaflet": "^2.7.0",
"react-leaflet-markercluster": "^2.0.0",
"react-router": "^5.2.0",
"react-router-dom": "^5.2.0",
"react-virtualized": "^9.22.3",
"roboto-fontface": "^0.10.0",
"source-map-loader": "^2.0.0"
},
"devDependencies": {
"@babel/core": "^7.12.10",
"@babel/plugin-proposal-class-properties": "^7.12.1",
"@babel/plugin-proposal-decorators": "^7.12.12",
"@babel/plugin-proposal-export-namespace-from": "^7.12.1",
"@babel/plugin-syntax-dynamic-import": "^7.8.3",
"@babel/plugin-transform-async-to-generator": "^7.12.1",
"@babel/plugin-transform-react-constant-elements": "^7.12.1",
"@babel/plugin-transform-react-inline-elements": "^7.12.1",
"@babel/plugin-transform-runtime": "^7.12.10",
"@babel/preset-env": "^7.12.11",
"@babel/preset-react": "^7.12.10",
"@babel/preset-typescript": "^7.12.7",
"@svgr/webpack": "^5.5.0",
"@types/node": "^14.14.21",
"@types/webpack": "^4.41.26",
"@types/webpack-dev-server": "^3.11.1",
"@typescript-eslint/eslint-plugin": "^4.13.0",
"@typescript-eslint/parser": "^4.13.0",
"babel-eslint": "^10.1.0",
"babel-loader": "^8.2.2",
"clean-webpack-plugin": "^3.0.0",
"cross-env": "^7.0.3",
"css-loader": "^5.0.1",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.5",
"eslint": "^7.17.0",
"eslint-config-prettier": "^7.1.0",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-prettier": "^3.3.1",
"eslint-plugin-react": "^7.22.0",
"eslint-plugin-react-hooks": "^4.2.0",
"file-loader": "^6.2.0",
"html-webpack-harddisk-plugin": "^1.0.2",
"html-webpack-plugin": "^4.5.1",
"husky": "^3.1.0",
"import-sort": "^6.0.0",
"import-sort-cli": "^6.0.0",
"jsdom": "^16.4.0",
"jsdom-global": "3.0.2",
"less": "^4.1.0",
"less-loader": "^7.2.1",
"lint-staged": "^10.5.3",
"mini-css-extract-plugin": "^1.3.4",
"optimize-css-assets-webpack-plugin": "^5.0.4",
"prettier": "^2.2.1",
"style-loader": "^2.0.0",
"ts-node": "^9.1.1",
"typescript": "^4.1.3",
"url-loader": "^4.1.1",
"webpack": "^5.14.0",
"webpack-cli": "^4.3.1",
"webpack-dev-server": "^3.11.2"
},
"engineStrict": true,
"engines": {
"node": ">= 10.0.0",
"npm": ">= 6.0.0"
}
}