Javascript Webpack-浏览器在文件更改时刷新，该文件更改不是'；t模

我想在更改（保存）代码编辑器中的/src/*.js文件时刷新页面。 问题是我不是在我的入口点导入这些文件（在index.js中导入），而是用一个插件将它们连接起来，这样代码就在浏览器的全局范围内，而不是在模块中

基本上，我希望将较长的JavaScript代码拆分为较小的文件，我不希望有模块

我已经尝试了许多配置，最符合我需求的是下面的配置，除了它不会刷新浏览器（它会重新编译）

如何在JavaScript上实现重新编译和刷新，而JavaScript应该位于浏览器的全局范围内（或一个模块中的所有代码）

webpack.config.js：

const path = require('path');
const MergeIntoSingleFilePlugin = require('webpack-merge-and-include-globally');
const FileWatcherPlugin = require("file-watcher-webpack-plugin");

module.exports = {
context: __dirname,
entry: { bundle: './src/index.js' },
output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist')
},
module: {
    rules: [{
        test: /\.css$/,
        use: [
            'style-loader',
            'css-loader'
        ]
    }]
},
plugins: [
    new MergeIntoSingleFilePlugin({
        files: {
            "app.js": [
                path.resolve(__dirname, './src/setup.js'),
                path.resolve(__dirname, './src/buttons.js'),
                path.resolve(__dirname, './src/circle.js'),
                path.resolve(__dirname, './src/wall.js')
            ]
        }
    }),
    new FileWatcherPlugin({
        root: __dirname,
        files: ['*.js']
    })
],
devServer: {
    contentBase: './dist',
    watchOptions: {
        aggregateTimeout: 300,
        poll: 1000
    },
    hot: true,
    inline: true,
    // publicPath: "./src",
    watchOptions: {
        ignored: './node_modules/'
    }
}
};

npm启动：

webpack-dev-server --open --inline --hot --watch --progress

setup.js、buttons.js等是常规的js脚本文件，而不是导出的类

任何想法都值得赞赏