Как заставить Webpack компилировать js и сразу перезагружать страницу?

Question

denis2601 @denis2601

Как заставить Webpack компилировать js и сразу перезагружать страницу?

Можно ли настроить Webpack так, что бы сервер открывал файл demo/index.html, и при изменении html/js перезагружал страницу, так же как правильно подключить js к demo/index.html

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

demo
 - index.html
dist
 - mainScript.js
 - mainScript.min.js
src
 - mainScript.js
package.json
webpack.config.js

package.json

{
    "name": "main-script",
    "version": "1.0.0",
    "description": "",
    "main": "./dist/mainScript.min.js",
    "keywords": [
        "formdata",
        "form",
        "data",
        "filter",
        "ajaxfilter",
        "formfilter"
    ],
    "author": "author author",
    "license": "BSD",
    "scripts": {
        "start": "webpack serve --mode development",
        "build": "webpack --mode production",
        "format": "prettier --write '**/**.{js,json,html}'",
        "lint": "eslint src --ext .js --fix"
    },
    "devDependencies": {
        "@babel/core": "latest",
        "@babel/preset-env": "latest",
        "babel-loader": "latest",
        "eslint": "latest",
        "eslint-config-airbnb-base": "latest",
        "eslint-config-prettier": "latest",
        "eslint-plugin-import": "latest",
        "eslint-plugin-node": "latest",
        "eslint-plugin-prettier": "latest",
        "moment": "latest",
        "prettier": "latest",
        "terser-webpack-plugin": "latest",
        "webpack": "latest",
        "webpack-cli": "latest",
        "webpack-dev-server": "latest"
    }
}

webpack.config.js:

const path              = require('path');
const webpack           = require('webpack');
const moment            = require('moment');
const now               = moment().format('MMMM DD, YYYY');

const TerserPlugin      = require('terser-webpack-plugin');

const PACKAGE = require('./package.json'),
    version = PACKAGE.version,
    description = PACKAGE.description,
    author = PACKAGE.author,
    homepage = PACKAGE.homepage;

const BannerPlugin = new webpack.BannerPlugin({
    banner: `/*!
 * mainScript ${version}
 * ${description}
 *
 * Copyright 2022 ${author}
 *
 * Released under the BSD License
 *
 * Released on: ${now}
 */`,
    raw: true
});

module.exports = {
    entry: {
        mainScript: './src/mainScript.js', 'mainScript.min': './src/mainScript.js'
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].js',
        library: 'mainScript',
        libraryTarget: 'umd',
        umdNamedDefine: true,
        libraryExport: 'default'
    },
    devServer: {
        watchFiles: ['src/**/*', 'demo/**/*'],
        static: {
            directory: path.join(__dirname, '/'),
            staticOptions: {
                redirect: true,
            },
        },
        open: true,
        port: 3000
    },
    optimization: {
        minimize: true,
        minimizer: [
            new TerserPlugin({
                include: /\.min\.js$/,
                extractComments: false,
                terserOptions: {
                    ecma: 5
                }
            })
        ]
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader'
                }
            }
        ]
    },
    plugins: [BannerPlugin]
};

demo/index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>mainScript</title>
</head>
<body>

<form id="filter">
    <label>
        <input type="text" name="search" placeholder="Search...">
    </label>

    <label>
        <input type="radio" name="date" value="ASC"/>
        <span>Date: Ascending</span>
    </label>
    <label>
        <input type="radio" name="date" value="DESC"/>
        <span>Date: Descending</span>
    </label>

    <label>
        <span>1</span>
        <input type="checkbox" name="option" value="1"/>
    </label>
    <label>
        <span>2</span>
        <input type="checkbox" name="option" value="2"/>
    </label>
    <label>
        <span>3</span>
        <input type="checkbox" name="option" value="3"/>
    </label>
    <label>
        <span>4</span>
        <input type="checkbox" name="option" value="4"/>
    </label>

    <input type="submit" value="submit">
</form>

<script src="../dist/mainScript.js"></script>
<script>
    let mScript = new mainScript('#filter', {
        // ...
    });
</script>
</body>
</html>