webpack.config.js

"use strict";

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

module.exports = {
	mode: "development",
	entry: "./src/js/main.js",
	output: {
		filename: "main.js",
		path: path.resolve(__dirname, "dist"),
	},
	devServer: {
		static: path.resolve(__dirname, "dist"),
		port: 8081,
		hot: true,
	},
	plugins: [
		new HtmlWebpackPlugin({
			template: "./src/index.html",
			filename: "index.html",
		}),
		new HtmlWebpackPlugin({
			template: "./src/discover.html",
			filename: "discover.html",
		}),
		new HtmlWebpackPlugin({
			template: "./src/favorites.html",
			filename: "favorites.html",
		}),
		new HtmlWebpackPlugin({
			template: "./src/map.html",
			filename: "map.html",
		}),
		new MiniCssExtractPlugin(),
	],
	module: {
		rules: [
			{
				test: /\.css$/,
				use: [MiniCssExtractPlugin.loader, "css-loader"],
			},
			{
				test: /\.(scss)$/,
				use: [
					{
						// Adds CSS to the DOM by injecting a `<style>` tag
						loader: "style-loader",
					},

					{
						// Interprets `@import` and `url()` like `import/require()` and will resolve them
						loader: "css-loader",
					},
					{
						// Loader for webpack to process CSS with PostCSS
						loader: "postcss-loader",
						options: {
							postcssOptions: {
								plugins: [autoprefixer],
							},
						},
					},
					{
						// Loads a SASS/SCSS file and compiles it to CSS
						loader: "sass-loader",
					},
				],
			},
			{
				test: /\.html$/i,
				loader: "html-loader",
			},
		],
	},
};