webpack.config.js

// Plugin can remove function calls from final code
// We use it to remove all "console.log" calls in production
const WebpackStripLoader = require("strip-loader");

// Takes a template and puts the bundles in
const HtmlWebpackPlugin = require("html-webpack-plugin");

// Copies files statically
const CopyWebpackPlugin = require("copy-webpack-plugin");

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

// Clears a folder
const CleanWebpackPlugin = require("clean-webpack-plugin");

// Inline SVGs if you put "inline" as attribute in an image
// Hooks into the HtmlWebpackPlugin an executes after the "emit" hook
const HtmlWebpackInlineSVGPlugin = require("html-webpack-inline-svg-plugin");

module.exports = (env, argv) => {
	const isProd = argv.mode === "production";

	// Development Config
	const config = {
		mode: argv.mode,
		entry: ["./src/js/sol.js"],
		output: {
			filename: "js/app.js",
		},
		module: {
			rules: [
				// Babel converts >ES6 to ES5 for compatibility
				{
					test: /\.js$/,
					loader: "babel-loader",
					exclude: /node_modules/,
					query: {
						presets: [
							[
								"@babel/env",
								{
									targets: {
										browsers: ["Chrome >=59"],
									},
								},
							],
						],
					},
				},

				{
					test: /\.scss$/,
					use: [
						"style-loader",
						MiniCssExtractPlugin.loader,
						"css-loader",
						"postcss-loader",
						"sass-loader",
					],
				},

				// URL-Loader inlines images as base64 up to a certain size,
				// and defers to a different loader otherwise
				// {
				//   test: /\.(png|jpg|gif|svg)$/i,
				//   use: [
				//     {
				//       loader: 'url-loader',
				//       options: {
				//         // limit: 8192
				//       }
				//     }
				//   ]
				// }
			],
		},
		plugins: [
			// Clear the dist folder
			new CleanWebpackPlugin(["dist"], {}),

			// Save the css bundle as file
			new MiniCssExtractPlugin({
				filename: "css/styles.css",
			}),

			// Put bundle links into the view
			new HtmlWebpackPlugin({
				title: "Zentigon Solitaire",
				template: "src/views/index.html",
				minify: isProd,
			}),

			// See description at top
			new HtmlWebpackInlineSVGPlugin(),

			// Copy assets folder statically
			new CopyWebpackPlugin(["src/assets"]),
		],

		optimization: {},
	};

	// Changes in production
	if (isProd) {
		config.optimization.minimize = true;

		// Strip console.log statements
		config.module.rules.push({
			test: /\.js$/,
			enforce: "post",
			exclude: /node_modules/,
			loader: WebpackStripLoader.loader("console.log"),
		});

		// TODO Remove copy plugin for images and add Image Processor plugin
	}

	return config;
};