const path = require('path');
const BrowserSyncPlugin = require('browser-sync-webpack-plugin');

module.exports = {
    entry: './blocks/offcanvas-menu/index.js',
    output: {
        path: path.resolve(__dirname, 'blocks/offcanvas-menu/build'),
        filename: 'index.build.js',
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader'
                }
            }
        ]
    },
    plugins: [
        new BrowserSyncPlugin({
            host: 'localhost',
            port: 80,
            proxy: 'https://srh.stu/_mkt/edit/',
            https: {
                key: '/opt/homebrew/etc/httpd/ssl/srh.stu-key.pem',
                cert: '/opt/homebrew/etc/httpd/ssl/srh.stu.pem'
            },
            files: [
                './parts/**/*.html',
                './blocks/**/*.js',
                './assets/**/*.css',
                './**/*.php'
            ],
            open: true,
            reloadDelay: 50,
            watchEvents: ['change', 'add', 'unlink', 'addDir', 'unlinkDir'],
            injectChanges: true,
            notify: false,
            snippetOptions: {
                rule: {
                    match: /<\/body>/i,
                    fn: function (snippet, match) {
                        return `<script src="/browser-sync-reload.js"></script>${snippet}${match}`;
                    }
                }
            },
            serveStatic: [{
                route: '/browser-sync-reload.js',
                dir: path.resolve(__dirname, 'browser-sync.js')
            }]
        })
    ]
};