Answer the question
In order to leave comments, you need to log in
Why doesn't live reloading work in WebPack v5?
After updating WebPack v5, live reloading stopped working.
PS hot did not use before, now I tried it, writes `[HMR] Waiting for update signal from WDS...)`, but does not follow the changes.
package json
{
"name": "webpack-configuration",
"version": "1.0.0",
"description": "",
"private": true,
"scripts": {
"dev": "cross-env NODE_ENV=development webpack --config config/webpack.dev.js",
"build": "cross-env NODE_ENV=production webpack --config config/webpack.prod.js",
"start": "cross-env NODE_ENV=development webpack serve --config config/webpack.dev.js"
},
"browserslist": [
"> 0.25%, not dead",
"> 1%",
"last 2 versions"
],
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.12.3",
"@babel/preset-env": "^7.12.1",
"autoprefixer": "^10.0.1",
"babel-loader": "^8.1.0",
"clean-webpack-plugin": "^3.0.0",
"copy-webpack-plugin": "^6.3.0",
"cross-env": "^7.0.2",
"css-loader": "^5.0.1",
"file-loader": "^6.2.0",
"html-webpack-harddisk-plugin": "^1.0.2",
"html-webpack-plugin": "^5.0.0-alpha.14",
"mini-css-extract-plugin": "^1.3.0",
"node-sass": "^5.0.0",
"optimize-css-assets-webpack-plugin": "^5.0.4",
"postcss": "^8.1.6",
"postcss-loader": "^4.0.4",
"sass-loader": "^10.0.5",
"style-loader": "^2.0.0",
"terser-webpack-plugin": "^5.0.3",
"url-loader": "^4.1.1",
"webpack": "^5.4.0",
"webpack-cli": "^4.2.0",
"webpack-dev-server": "^3.11.0",
"webpack-merge": "^5.3.0"
},
"dependencies": {
"@babel/polyfill": "^7.12.1",
"jquery": "^3.5.1",
"normalize.css": "^8.0.1"
}
}
const HTMLWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const isDev = process.env.NODE_ENV === 'development';
const isProd = !isDev;
const PATHS = require('./paths');
const filename = ext => (isDev ? `[name].${ext}` : `[name].[fullhash].${ext}`);
module.exports = {
// Входные файлы
entry: {
main: ['@babel/polyfill', `${PATHS.src}/index.js`],
},
// Выходные файлы
output: {
filename: `js/${filename('js')}`,
path: `${PATHS.build}/`,
publicPath: '/'
},
// Алиасы
resolve: {
extensions: ['.js', '.json'],
alias: {
'@modules': `${PATHS.src}/modules`,
'@': PATHS.src,
},
},
// Плагины
plugins: [
// Сброка html
new HTMLWebpackPlugin({
template: `${PATHS.src}/index.html`,
minify: {
collapseWhitespace: isProd
},
chunks: ['main'],
}),
// Очистка от лишних файлов
new CleanWebpackPlugin(),
// Копирование картинок
new CopyWebpackPlugin({
patterns: [
{
from: `${PATHS.src}/${PATHS.assets}/image`,
to: `${PATHS.build}/${PATHS.assets}/image`,
},
],
}),
new MiniCssExtractPlugin({
filename: `css/${filename('css')}`,
}),
],
// Файлы
module: {
rules: [
// css
{
test: /\.css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'postcss-loader'
],
},
// sass/sccs
{
test: /\.s[ac]ss$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'postcss-loader',
'sass-loader'
],
},
// images
{
test: /img\.svg$|\.(png|jpg|jpeg|gif)$/,
use: [
{
loader: 'file-loader',
options: {
publicPath: '../',
name: `assets/image/[name].[ext]`,
}
},
],
},
// fonts
{
test: /font\.svg$|\.(ttf|woff|woff2|eot)$/,
use: [
{
loader: 'file-loader',
options: {
publicPath: '../',
name: `assets/fonts/[name].[ext]`,
},
},
],
},
// js
{
test: /\.js$/,
exclude: /node_modules/,
use: [
{
loader: 'babel-loader',
options: {
presets: [
'@babel/preset-env'
]
},
},
],
}
]
},
};
const { merge } = require('webpack-merge');
// const webpack = require('webpack');
const base = require('./webpack.base');
const PATHS = require('./paths');
module.exports = merge(base, {
mode: 'development',
devtool: 'inline-source-map',
optimization: {
splitChunks: {
chunks: 'all',
}
},
devServer: {
historyApiFallback: true,
contentBase: PATHS.build,
open: true,
compress: true,
// hot: true,
inline: true,
port: 5500,
},
plugins: [
// Only update what has changed on hot reload
// new webpack.HotModuleReplacementPlugin(),
],
});
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