Quick compile and server Webpack config file for local Wordpress plugin development

webpack.config.dev.js

/**
 * Dev Webpack mode
 * Uses regular Webpack not Webpack-server.
 * Uses BrowserSync to create a local server.
 * Watch mode compiles and reloads on changes.
 * Simplified version doesn't minify, etc.. to make process faster.
 */

const path = require('path');
const webpack = require('webpack');
const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
	mode: 'development',
	entry: {
		myApp_admin: "./src/scss/admin_styles.scss",
		myApp:  [ "./src/index.js" ],
	},
	output: {
		filename: 'js/[name].js',
		path: path.resolve(__dirname, "assets")
	},
	module: {
		rules: [
			{
				test: /\.s[c|a]ss$/,
				use: [
					{
						loader: MiniCssExtractPlugin.loader,
					},
					'css-loader',
          'sass-loader',
        ],
			},
		]
	},
	plugins: [
		new MiniCssExtractPlugin({
			filename: "css/[name].css"
		}),
		new BrowserSyncPlugin(
      // BrowserSync options
      {
				files: '**/*.php',
        // browse to http://localhost:3000/ during development
        host: 'localhost',
        port: 3000,
				proxy: 'http://yourlocalserver.dev/',
      },
      // plugin options
      {
				// reload: true,
				// injectCss: true, // doesn't work
				injectChanges: true,
      }
    ),

	],
};