Webpack for Wordpress

webpack.config.js

// Theme folder installed at wp-content/themes/mytheme/assets/

// Folder hierarchy as follows:

// assets
// -- js
// ---- admin.js
// ---- public.js
// -- scss
// ---- main.scss

// webpack.config.js in wp-content/themes/mytheme

const path = require('path');
const TerserPlugin = require("terser-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");

module.exports = {
	context: __dirname,
	entry: {
		admin: path.resolve(__dirname, './assets/js/admin.js'),
		public: path.resolve(__dirname, './assets/js/public.js'),
	},
	output: {
		filename: '[name].min.js',
		path: path.resolve(__dirname, './assets/dist/js')
	},
	externals: {
		jquery: "jQuery"
	},
	module: {
		rules: [
			{
				test: /\.js$/,
				exclude: /(node_modules|bower_components)/,
				use: {
					loader: 'babel-loader',
					options: {
						presets: ['babel-preset-env']
					}
				}
			},
			{
				test: /.s?css$/,
				use: [MiniCssExtractPlugin.loader, 'css-loader', 'sass-loader'],
				
			}
		]
	},
	plugins: [
		new TerserPlugin(),
		new MiniCssExtractPlugin({
			filename: '../css/[name].min.css'
		}),
		new CssMinimizerPlugin(),
	],
	optimization: {
		minimize: true,
		minimizer: [
			new TerserPlugin(),
			new CssMinimizerPlugin(),
		],
	},
}

// Contents of package.json
"devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^8.2.2",
    "babel-preset-env": "^1.7.0",
    "css-loader": "^6.2.0",
    "css-minimizer-webpack-plugin": "^3.0.2",
    "mini-css-extract-plugin": "^2.1.0",
    "node-sass": "^6.0.1",
    "sass-loader": "^12.1.0",
    "style-loader": "^3.2.1",
    "terser-webpack-plugin": "^5.1.4",
    "webpack": "^5.45.1",
    "webpack-cli": "^4.7.2"
}