startpage/webpack.config.js

/* eslint-env node */
/* eslint-disable @typescript-eslint/no-var-requires */

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

const DEVELOPMENT = process.env.NODE_ENV === "development";

module.exports = {
	context: path.join(__dirname, "src"),
	resolve: {
		extensions: [".js", ".ts", ".tsx"]
	},
	entry: ["./index.tsx"],
	output: {
		path: path.join(__dirname, "dist"),
		filename: "bundle.js"
	},
	devtool: DEVELOPMENT ? "source-map" : false,
	devServer: {
		contentBase: "./dist",
		inline: true,
		host: "localhost",
		port: 8080,
		stats: "errors-only",
		liveReload: true,
		watchContentBase: true
	},
	watchOptions: {
		ignored: ['dist/**', 'node_modules/**']
	},
	module: {
		rules: [
			{
				test: /\.(ts|tsx)$/,
				exclude: /node_modules/,
				loader: "ts-loader"
			},
			{
				test: /\.s[ac]ss$/i,
				use: [
					MiniCssExtractPlugin.loader,
					"css-loader",
					"sass-loader",
				],
			},
			{
				test: /\.(png|jpg|gif|svg)$/,
				loader: "file-loader",
				options: {
					name: "assets/img/[name].[ext]?[hash]"
				}
			}
		]
	},
	plugins: [
		new HtmlWebpackPlugin({
			filename: "index.html",
			template: "index.html",
			hash: true,
			minify: !DEVELOPMENT
		}),
		new MiniCssExtractPlugin()
	]
};