Как настроить livereload на node js проекте, использовав webpack-dev-server?

Question

[marks26]

У меня есть проект на node js, в котором я использую webpack для сборки файлов js/css в один файл. Раньше у меня получалось создавать проекты, используя webpack-dev-server, благодаря чему можно было видеть с ходу все изменения в браузере, прежде чем собрать все файлы в один. Но эти проекты были не на node js =)
Теперь же, при попытке создать приложение на node js, я столкнулся с проблемой настройки webpack-dev-server. В интернете я видел очень много примеров настройки с react, но мой проект не использует react.

Ниже я попробовал одно из решений, которые я нагуглил, но оно тоже не работает.

Структура проекта:


server.js:

const express = require('express');
const mongoose = require('mongoose');
const session = require('express-session');
const exphbs = require('express-handlebars');
const bodyParser = require('body-parser');
const connectMongo = require('connect-mongo');
const config = require('./config');
const routes = require('./routes/app-routes');

const app = express();
const environment = config.DEVELOPMENT;

const webpack = require('webpack');
const webpackDevServer = require('webpack-dev-server');
const webpackConfig = require('./webpack.config.js');

const hbs = exphbs.create({
  defaultLayout: 'main',
  extname: 'hbs',
});

app.engine('hbs', hbs.engine);
app.set('view engine', 'hbs');
app.set('views', 'views');

const MongoStore = connectMongo(session);

app.use(session({
  secret: config[environment].secret,
  resave: false,
  saveUninitialized: true,
  store: new MongoStore({ mongooseConnection: mongoose.connection }),
}));

app.use(bodyParser.urlencoded({ extended: true }));

app.use((req, res, next) => {
  const { userId } = req.session;
  if (userId) {
    res.locals = { displayLink: true };
  } else {
    res.locals = { displayLink: false };
  }
  next();
});

app.use(express.static(`${__dirname}/public`));
app.use(routes);

// ------------------------------ Database Connection ----------------------------------

const PORT = process.env.PORT || 8080;

async function start() {
  try {
    await mongoose.connect(config[environment].database, {
      useNewUrlParser: true,
      useFindAndModify: false,
      useUnifiedTopology: true,
    });
    new webpackDevServer(webpack(webpackConfig), {
      publicPath: webpackConfig.output.publicPath,
      hot: true,
      historyApiFallback: true,
    }).listen(PORT, () => {
      console.log('Server has been started...');
    });
  } catch (e) {
    console.log(e);
  }
}

// ----------------------------- Database Connection end -----------------------------------

start();

webpack.config.js:

const path = require('path');
const webpack = require('webpack');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  devtool: 'eval-source-map',
  entry: [
    'webpack-dev-server/client?http://localhost:8080',
    'webpack/hot/only-dev-server',
    './src/index.js',
  ],
  output: {
    path: path.join(__dirname, './public/dist'),
    filename: 'main.js',
    publicPath: '/dist',
  },
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new MiniCssExtractPlugin(),
  ],
  module: {
    rules: [{
      test: /\.js$/,
      exclude: /node_modules/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env'],
        },
      },
    },
    {
      test: /\.css$/,
      use: [MiniCssExtractPlugin.loader, 'css-loader']
    }],
  },
};

При запуске сервера node server.js консоль выдаёт следующие:


В браузере пишет Cannot GET /

Answer 1

[marks26]

Нагуглил такое решение, может кому пригодится
https://medium.com/@binyamin/creating-a-node-expre...

livereload осуществляется благодаря Webpack Dev Middleware и Webpack Hot Middleware

Answer 2

[Дмитрий Беляев]

webpack-dev-server не поддерживает hot-reload для node
https://github.com/webpack/webpack-dev-server/blob...

и сам hot-reload не работает "по-волшебству", просто многие лоадеры вставляют дополнительный код для его поддержки