webpack.config.js

const path = require('path');
const glob = require('glob');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HandlebarsWebpackPlugin = require('handlebars-webpack-plugin');

module.exports = (env, argv) => {
	const isDevMode = argv.mode === 'development';

	return {
		entry: {
			vendor: './webpack.vendor.js',
			app: './webpack.app.js'
		},
		output: {
			path: path.resolve(__dirname, 'dist'),
			filename: 'assets/js/[name].min.js'
		},
		module: {
			rules: [
				{
					test: /\.css$/,
					use: [
						MiniCssExtractPlugin.loader,
						'css-loader',
						{
							loader: 'postcss-loader',
							options: {
								postcssOptions: {
									plugins: [
										require('autoprefixer')()
									]
								}
							}
						}
					]
				},
				{
					test: /\.scss$/,
					use: [
						MiniCssExtractPlugin.loader,
						'css-loader',
						{
							loader: 'postcss-loader',
							options: {
								postcssOptions: {
									plugins: [
										require('autoprefixer')()
									]
								}
							}
						},
						{
							loader: 'sass-loader',
							options: {
								sassOptions: {
									silenceDeprecations: ['color-functions', 'global-builtin', 'import', 'legacy-js-api', 'if-function']
								}
							}
						}
					]
				},
				{
					test: /\.(png|svg|jpg|jpeg|gif)$/,
					type: 'asset/resource',
					generator: {
						filename: 'assets/img/[name][ext][query]'
					}
				},
				{
					test: /\.(woff|woff2|eot|ttf|otf)$/,
					type: 'asset/resource',
					generator: {
						filename: 'assets/fonts/[name][ext][query]'
					}
				}
			]
		},
		plugins: [
			new CleanWebpackPlugin(),
			new MiniCssExtractPlugin({
				filename: 'assets/css/[name].min.css'
			}),
			new HandlebarsWebpackPlugin({
        entry: path.join(process.cwd(), 'src', 'html', '*.hbs'),
        output: path.join(process.cwd(), 'dist', '[name].html'),
        partials: [
          path.join(process.cwd(), 'src', 'html', 'partial', '*.hbs')
        ]
      }),
			...glob.sync('./src/html/*.hbs').map((templateFile) => {
				const filename = path.basename(templateFile, '.hbs') + '.html';
				return new HtmlWebpackPlugin({
					template: templateFile,
					filename: filename,
					minify: false,
					excludeChunks: ['app', 'vendor']
				});
			}),
			new CopyWebpackPlugin({
				patterns: [
					{ from: 'src/img', to: 'assets/img' },
					{ from: 'src/data', to: 'assets/data' },
					{ from: 'src/js/demo', to: 'assets/js/demo' },
					{ from: 'node_modules/bootstrap-icons/font/fonts/', to: 'assets/css/fonts/' },
					{ from: 'node_modules/@fortawesome/fontawesome-free/webfonts', to: 'assets/webfonts' },
					{ from: 'node_modules/@fortawesome/', to: 'assets/plugins/@fortawesome/' },
					{ from: 'node_modules/@fullcalendar/', to: 'assets/plugins/@fullcalendar/' },
					{ from: 'node_modules/@highlightjs/cdn-assets/', to: 'assets/plugins/@highlightjs/cdn-assets/' },
					{ from: 'node_modules/apexcharts/', to: 'assets/plugins/apexcharts/' },
					{ from: 'node_modules/blueimp-canvas-to-blob/', to: 'assets/plugins/blueimp-canvas-to-blob/' },
					{ from: 'node_modules/blueimp-file-upload/', to: 'assets/plugins/blueimp-file-upload/' },
					{ from: 'node_modules/blueimp-gallery/', to: 'assets/plugins/blueimp-gallery/' },
					{ from: 'node_modules/blueimp-load-image/', to: 'assets/plugins/blueimp-load-image/' },
					{ from: 'node_modules/blueimp-tmpl/', to: 'assets/plugins/blueimp-tmpl/' },
					{ from: 'node_modules/bootstrap/', to: 'assets/plugins/bootstrap/' },
					{ from: 'node_modules/bootstrap-datepicker/', to: 'assets/plugins/bootstrap-datepicker/' },
					{ from: 'node_modules/bootstrap-daterangepicker/', to: 'assets/plugins/bootstrap-daterangepicker/' },
					{ from: 'node_modules/bootstrap-icons/', to: 'assets/plugins/bootstrap-icons/' },
					{ from: 'node_modules/bootstrap-slider/', to: 'assets/plugins/bootstrap-slider/' },
					{ from: 'node_modules/bootstrap-table/', to: 'assets/plugins/bootstrap-table/' },
					{ from: 'node_modules/bootstrap-timepicker/', to: 'assets/plugins/bootstrap-timepicker/' },
					{ from: 'node_modules/chart.js/', to: 'assets/plugins/chart.js/' },
					{ from: 'node_modules/datatables.net/', to: 'assets/plugins/datatables.net/' },
					{ from: 'node_modules/datatables.net-bs5/', to: 'assets/plugins/datatables.net-bs5/' },
					{ from: 'node_modules/datatables.net-autofill/', to: 'assets/plugins/datatables.net-autofill/' },
					{ from: 'node_modules/datatables.net-autofill-bs5/', to: 'assets/plugins/datatables.net-autofill-bs5/' },
					{ from: 'node_modules/datatables.net-buttons/', to: 'assets/plugins/datatables.net-buttons/' },
					{ from: 'node_modules/datatables.net-buttons-bs5/', to: 'assets/plugins/datatables.net-buttons-bs5/' },
					{ from: 'node_modules/datatables.net-colreorder/', to: 'assets/plugins/datatables.net-colreorder/' },
					{ from: 'node_modules/datatables.net-colreorder-bs5/', to: 'assets/plugins/datatables.net-colreorder-bs5/' },
					{ from: 'node_modules/datatables.net-fixedcolumns/', to: 'assets/plugins/datatables.net-fixedcolumns/' },
					{ from: 'node_modules/datatables.net-fixedcolumns-bs5/', to: 'assets/plugins/datatables.net-fixedcolumns-bs5/' },
					{ from: 'node_modules/datatables.net-fixedheader/', to: 'assets/plugins/datatables.net-fixedheader/' },
					{ from: 'node_modules/datatables.net-fixedheader-bs5/', to: 'assets/plugins/datatables.net-fixedheader-bs5/' },
					{ from: 'node_modules/datatables.net-keytable/', to: 'assets/plugins/datatables.net-keytable/' },
					{ from: 'node_modules/datatables.net-keytable-bs5/', to: 'assets/plugins/datatables.net-keytable-bs5/' },
					{ from: 'node_modules/datatables.net-responsive/', to: 'assets/plugins/datatables.net-responsive/' },
					{ from: 'node_modules/datatables.net-responsive-bs5/', to: 'assets/plugins/datatables.net-responsive-bs5/' },
					{ from: 'node_modules/datatables.net-rowgroup/', to: 'assets/plugins/datatables.net-rowgroup/' },
					{ from: 'node_modules/datatables.net-rowgroup-bs5/', to: 'assets/plugins/datatables.net-rowgroup-bs5/' },
					{ from: 'node_modules/datatables.net-rowreorder-bs5/', to: 'assets/plugins/datatables.net-rowreorder-bs5/' },
					{ from: 'node_modules/datatables.net-scroller/', to: 'assets/plugins/datatables.net-scroller/' },
					{ from: 'node_modules/datatables.net-scroller-bs5/', to: 'assets/plugins/datatables.net-scroller-bs5/' },
					{ from: 'node_modules/datatables.net-select/', to: 'assets/plugins/datatables.net-select/' },
					{ from: 'node_modules/datatables.net-select-bs5/', to: 'assets/plugins/datatables.net-select-bs5/' },
					{ from: 'node_modules/jquery/', to: 'assets/plugins/jquery/' },
					{ from: 'node_modules/jquery-migrate/', to: 'assets/plugins/jquery-migrate/' },
					{ from: 'node_modules/jquery-typeahead/', to: 'assets/plugins/jquery-typeahead/' },
					{ from: 'node_modules/jquery-ui-dist/', to: 'assets/plugins/jquery-ui-dist/' },
					{ from: 'node_modules/jquery.maskedinput/', to: 'assets/plugins/jquery.maskedinput/' },
					{ from: 'node_modules/js-cookie/', to: 'assets/plugins/js-cookie/' },
					{ from: 'node_modules/jszip/', to: 'assets/plugins/jszip/' },
					{ from: 'node_modules/jvectormap-content/', to: 'assets/plugins/jvectormap-content/' },
					{ from: 'node_modules/jvectormap-next/', to: 'assets/plugins/jvectormap-next/' },
					{ from: 'node_modules/lity/', to: 'assets/plugins/lity/' },
					{ from: 'node_modules/kbw-countdown/', to: 'assets/plugins/kbw-countdown/' },
					{ from: 'node_modules/masonry-layout/', to: 'assets/plugins/masonry-layout/' },
					{ from: 'node_modules/moment/', to: 'assets/plugins/moment/' },
					{ from: 'node_modules/perfect-scrollbar/', to: 'assets/plugins/perfect-scrollbar/' },
					{ from: 'node_modules/photoswipe/', to: 'assets/plugins/photoswipe/' },
					{ from: 'node_modules/select-picker/', to: 'assets/plugins/select-picker/' },
					{ from: 'node_modules/spectrum-colorpicker2/', to: 'assets/plugins/spectrum-colorpicker2/' },
					{ from: 'node_modules/summernote/', to: 'assets/plugins/summernote/' },
					{ from: 'node_modules/tag-it/', to: 'assets/plugins/tag-it' }
				]
			})
		],
		optimization: {
			minimizer: [
				new TerserPlugin({
					exclude: /assets\/plugins\/jquery-migrate\/test\/runner\/command\.js/,
				}),
				new CssMinimizerPlugin()
			],
			splitChunks: {
				cacheGroups: {
					vendorStyles: {
						type: 'css/mini-extract',
						test: /\.css$/,
						name: 'vendor',
						chunks: 'all',
						enforce: true,
					}
				}
			},
		},
		devServer: {
			static: {
				directory: path.join(__dirname, 'dist'),
			},
			devMiddleware: {
				writeToDisk: true,
			},
			liveReload: true,
			compress: false,
			port: 8000,
			hot: true
		},
		performance: {
			maxEntrypointSize: 1024000,
			maxAssetSize: 1024000,
		}
	}
};