phpengine/ui/admin/webpack.config.js

const path = require("path");
const TerserJSPlugin = require("terser-webpack-plugin");
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const HtmlPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const webpack = require("webpack");

const ASSET_INLINE_LIMIT = 100000;
const TERSER_PARALLEL_WORKERS = 4;
const PROJECT_NAME_PATH_OFFSET = -3;

/**
 * Gets the project name from the webpack configuration directory.
 *
 * @returns {string} The project directory name.
 * @sideEffects None.
 */
function getCurrentProjectName() {
	const pathParts = __dirname.split(path.sep);

	return pathParts[pathParts.length + PROJECT_NAME_PATH_OFFSET];
}

module.exports = {
	stats: {
		errorDetails: true,
	},
	plugins: [
		new CleanWebpackPlugin(),
		new HtmlPlugin({
			template: path.resolve(__dirname, "masterpage_template.tpl"),
			filename: path.resolve(__dirname, "masterpage.tpl")
		}),
		new MiniCssExtractPlugin({ filename: "styles.[contenthash].css" }),
		new webpack.ProvidePlugin({
			$: 'jquery',
			jQuery: 'jquery',
			'window.jQuery': 'jquery',
			toastr: 'toastr'
		})
	],
	module: {
		rules: [
			{
				test: /\.(css|scss)$/,
				use: [
					{ loader: MiniCssExtractPlugin.loader },
					{ loader: "css-loader" },
					{ loader: "sass-loader" }
				]
			},

			// Import various assets
			{
				test: /\.(jpg|png|woff|woff2|eot|ttf|svg)$/i,
				type: "asset",
				parser: {
					dataUrlCondition: { maxSize: ASSET_INLINE_LIMIT }
				}
			}
		]
	},
	optimization: {
		minimizer: [
			new TerserJSPlugin({
				terserOptions: { format: { comments: false } },
				parallel: TERSER_PARALLEL_WORKERS
			}),
			new CssMinimizerPlugin()
		],
	},
	entry: "./assets/js/index.js",
	output: {
		publicPath: '/' + getCurrentProjectName() + '/assets/admin/',
		path: path.resolve(__dirname, "../../assets/admin/"),
		filename: "bundle.[contenthash].js"
	}
};