webpack.common.js

const path = require("path"),
	webpack = require("webpack"),
	MiniCssExtractPlugin = require("mini-css-extract-plugin"),
	HtmlWebpackPlugin = require("html-webpack-plugin"),
	CopyWebpackPlugin = require("copy-webpack-plugin");

// Default entry
const entry = {
		app: "~/loot",
	},
	// Default output
	output = {
		path: path.resolve(__dirname, "public"),
		assetModuleFilename: "[name][ext]",
		clean: true,
	},
	// Rule for *.ts processing
	tsRule = {
		test: /\.ts$/u,
		loader: "ts-loader",
	},
	// Rule for *.css processing
	cssRule = {
		test: /\.css$/u,
		use: [MiniCssExtractPlugin.loader, "css-loader"],
	},
	// Rule for font processing
	fontRule = {
		test: /\.(?:ttf|woff|woff2|eot|svg)$/u,
		type: "asset/resource",
		generator: {
			filename: "fonts/[name][ext]",
		},
	},
	// Rule for *.ico processing
	iconRule = {
		test: /\.ico$/u,
		type: "asset/resource",
	},
	// Rule for *.html processing
	htmlRule = {
		test: /\.html$/u,
		include: /views/u,
		use: [
			{
				loader: "ngtemplate-loader",
				options: {
					// Strip path prefixes up to (and including) 'src/'
					relativeTo: "src/",
				},
			},
			{
				loader: "html-loader",
				options: {
					sources: {
						list: [
							"...",
							{
								attribute: "typeahead-template-url",
								type: "src",
							},
						],
					},
					esModule: false,
				},
			},
		],
	},
	/*
	 * Exposes a global jQuery object (Bootstrap expects this global to exist)
	 * window.jQuery is needed to prevent Angular from using jqLite
	 */
	providejQuery = new webpack.ProvidePlugin({
		$: "jquery",
		jQuery: "jquery",
		"window.jQuery": "jquery",
	}),
	// Creates index.html with the bundled resources
	createIndexHtml = new HtmlWebpackPlugin(),
	// Copies static resources to the build directory
	copyStaticAssets = new CopyWebpackPlugin({
		patterns: [
			{
				from: "*.html",
				context: "./src",
				globOptions: { ignore: ["index.html"] },
			},
			{ from: "robots.txt", context: "./src" },
		],
	}),
	// Default config
	config = {
		mode: "development",

		// Ensure that the context is the directory where the webpack.*.js config file is
		context: path.resolve(__dirname),

		// Default rules for all environments
		module: {
			rules: [tsRule, htmlRule],
		},

		// Default resolve paths
		resolve: {
			alias: {
				"~": path.resolve(__dirname, "src"),
			},
			extensions: [".ts", "..."],
		},

		optimization: {
			splitChunks: {
				chunks: "all",
				minSize: 0,
				cacheGroups: {
					defaultVendors: {
						name: "vendor",
						test: /[\\/]node_modules[\\/]/u,
					},
				},
			},
			runtimeChunk: "single",
		},

		// Abort on first error
		bail: true,
	};

function extractCss(options = undefined) {
	return new MiniCssExtractPlugin(options);
}

module.exports = {
	entry,
	output,
	cssRule,
	fontRule,
	iconRule,
	providejQuery,
	extractCss,
	createIndexHtml,
	copyStaticAssets,
	config,
};