mizner
6/20/2017 - 5:00 PM

Weback HMR for WP Plugin Example

Weback HMR for WP Plugin Example

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

const CONFIG = require('./config.json');
const APP_DIR = resolve(__dirname, 'src');
const BUILD_DIR = resolve(__dirname, 'dist');

module.exports = {

    entry: [APP_DIR + '/index.js'],

    output: {
        filename: CONFIG.project + '.min.js',
        path: BUILD_DIR,
        publicPath: '/'
    },

    context: APP_DIR,

    devtool: 'inline-source-map',

    module: {
        rules: [
            {
                test: /\.js$/,
                use: [
                    'babel-loader',
                ],
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    'css-loader?modules',
                ],
            },
        ],
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(), // Enable HMR
        new BrowserSyncPlugin({
                target: CONFIG.localUrl,
                proxy: "http://localhost:3000",

                // files: [
                //     {
                //         match: [
                //             '**/*.php'
                //         ],
                //         fn: function (event, file) {
                //             if (event === "change") {
                //                 const bs = require('browser-sync').get('bs-webpack-plugin');
                //                 bs.reload();
                //             }
                //         }
                //     }
                // ]

            },
            {
                reload: false
            })
    ],
    devServer: {

        // Testing Hot Module
        hot: true, // Tell the dev-server we're using HMR
        // contentBase: BUILD_DIR,
        // publicPath: '/',

        // Proxy Settings
        proxy: {
            '/': {
                target: {
                    host: "http://localhost:3000",
                    protocol: "http:",
                    port: 8888
                },
                changeOrigin: true,
                secure: false,
                watch: CONFIG.watch,
            }
        },
    }
};