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,
}
},
}
};