@Weij33t

Как сделать так, чтобы в webpack 5 работал hot reload?

Выводит в консоль одну-единственную строку - [HMR] Waiting for update signal from WDS..
И кроме этого ничего.
При изменении файлов все успешно компилируется, но перезагружать приходится вручную - скорость разработки страдает.

Webpack.config.js

const path = require('path')
const webpack = require('webpack')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const HTMLWebpackPlugin = require('html-webpack-plugin')
const CopyPlugin = require('copy-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

const isProd = process.env.NODE_ENV === 'production'
const isDev = !isProd

const filename = (ext) => (isDev ? `bundle.${ext}` : `bundle.[hash].${ext}`)

const jsLoaders = () => {
  const loaders = [
    {
      loader: 'babel-loader',
      options: {
        presets: ['@babel/preset-env'],
      },
    },
  ]

  if (isDev) {
    loaders.push('eslint-loader')
  }

  return loaders
}

module.exports = {
  context: path.resolve(__dirname, './src'),
  mode: 'development',
  entry: ['@babel/polyfill', './index.js'],
  output: {
    filename: filename('js'),
    path: path.resolve(__dirname, './dist'),
  },
  resolve: {
    extensions: ['.js'],
    alias: {
      '@': path.resolve(__dirname, 'src'),
      '@core': path.resolve(__dirname, 'src/core'),
    },
  },
  devtool: isDev ? 'source-map' : false,
  devServer: {
    contentBase: path.join(__dirname, '../'), // попытки починить
    compress: true, // попытки починить
    port: 9000,
    hot: isDev,
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(), // попытки починить
    new CleanWebpackPlugin(),
    new HTMLWebpackPlugin({
      template: 'index.html',
      minify: {
        removeComments: isProd,
        collapseWhitespace: isProd,
      },
    }),
    new CopyPlugin([
      {
        from: path.resolve(__dirname, 'src/favicon.ico'),
        to: path.resolve(__dirname, 'dist'),
      },
    ]),
    new MiniCssExtractPlugin({
      filename: filename('css'),
    }),
  ],
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {
              hmr: isDev,
              reloadAll: true,
            },
          },
          'css-loader',
          'sass-loader',
        ],
      },
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: jsLoaders(),
      },
    ],
  },
}


package.json
{
  "name": "weij33t",
  "version": "1.0.0",
  "main": "webpack.config.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "cross-env NODE_ENV=development webpack-dev-server --hot --open",
    "build": "cross-env NODE_ENV=production webpack --mode production"
  },
  "keywords": [
    "js",
    "javascript",
    "excel"
  ],
  "private": true,
  "browserslist": "> 0.25%, not dead",
  "devDependencies": {
    "@babel/core": "^7.12.3",
    "@babel/preset-env": "^7.12.1",
    "babel-eslint": "^10.1.0",
    "babel-loader": "^8.1.0",
    "clean-webpack-plugin": "^3.0.0",
    "copy-webpack-plugin": "^5.1.2",
    "cross-env": "^7.0.2",
    "css-loader": "^3.6.0",
    "eslint": "^6.8.0",
    "eslint-config-google": "^0.14.0",
    "eslint-loader": "^3.0.4",
    "html-webpack-plugin": "^5.0.0-alpha.10",
    "mini-css-extract-plugin": "^0.9.0",
    "node-sass": "^4.14.1",
    "sass-loader": "^8.0.2",
    "webpack": "^5.3.2",
    "webpack-cli": "^3.3.12",
    "webpack-dev-middleware": "^4.0.0",
    "webpack-dev-server": "^3.11.0"
  },
  "dependencies": {
    "@babel/polyfill": "^7.12.1",
    "normalize.css": "^8.0.1"
  }
}
  • Вопрос задан
  • 138 просмотров
Пригласить эксперта
Ответы на вопрос 1
@MichelPodkhvatiln
Если еще актуально, я нашел решение данной проблемы тут : https://github.com/webpack/webpack-dev-server/issu....

Кратко, проблема заключается в .browserslist .
Нужно в webpack.config.js добавить данную проверку:
target: process.env.NODE_ENV === "development" ? "web" : "browserslist",


Как-то так)

А также в Webpack 5 изменился вызов dev сервера.

"start": "cross-env NODE_ENV=development webpack serve"
Ответ написан
Ваш ответ на вопрос

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

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