3

I want to refresh page when I change (save) ./src/*.js files in my code editor. The problem is I'm not importing this files in my entry point (with import in index.js) but I'm joining them with a plugin so code is in browser's global scope rather then in module.

Basically I want to split longer JavaScript code into smaller files, I don't want to have modules.

I've tried many configurations and closest to my needs is that below, except that it doesn't refresh browser, (it recompiles).

How can I achieve recompile and refresh on JavaScript which should be in globalscope of the browser (or all code in one module)?

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 start:

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

and the setup.js, buttons.js etc are regular JS script files, not exported classes.

Any ideas appreciated!

Jan Pi
  • 167
  • 2
  • 13

0 Answers0