Foundry with Webpack example

src\images\foo.jpg

// jpg goes here

src\scripts\index.ts

import { preloadTemplates, getPartial } from "@/templates";

Hooks.once("init", async function () {
    Handlebars.registerHelper("partial", getPartial);

    // Preload templates.
    await preloadTemplates();
});

src\scripts\templates.ts

const TEMPLATES = require.context("templates/", true, /\.html$/, "sync");

export function preloadTemplates() {
    // Use Webpack trickery to get the filenames for the templates
    return loadTemplates(TEMPLATES.keys().map(TEMPLATES) as string[]);
}

export function getPartial(partialName: string) {
    return TEMPLATES(`./parts/${partialName}.html`);
}

src\styles\index.scss

.foo {
    background: url("images/foo.jpg") repeat;
}

src\templates\example.html

<div class="foo">
    {{> (partial "example_part") name="foo"}}
</div>

src\templates\parts\example_part.html

Hello, {name}

system.json

{
    "name": "example",
    "esmodules": ["dist/main.js"],
    "styles": ["dist/main.css"],
    // ...
}

webpack.config.js

/* eslint-env node */
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const HtmlMinimizerPlugin = require("html-minimizer-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

/** @type {import("webpack").Configuration} */
module.exports = {
    mode: "production",
    devtool: "source-map",
    entry: ["scripts/index.ts", "styles/index.scss"],
    output: {
        clean: true,
        publicPath: "/systems/example/dist/",
        // assetModuleFilename: "[path][name][ext]",
        assetModuleFilename: (p) => p.filename.replace("src/", ""),
    },
    module: {
        rules: [
            {
                test: /\.(t|j)s$/,
                use: "ts-loader",
                exclude: /node_modules/,
            },
            {
                test: /\.scss$/,
                use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
            },
            {
                test: /\.(png|jpe?g|gif|svg|html)$/,
                type: "asset/resource",
            },
        ],
    },
    resolve: {
        modules: ["node_modules", "src"],
        extensions: [".ts", `...`],
        alias: {
            "@": "scripts",
        },
    },
    plugins: [new MiniCssExtractPlugin()],
    optimization: {
        minimizer: [
            `...`,
            new CssMinimizerPlugin(),
            new HtmlMinimizerPlugin({
                minimizerOptions: {
                    customAttrSurround: [[/\{\{#[^}]+\}\}/, /\{\{\/[^}]+\}\}/]],
                    // ignoreCustomFragments: [/\{\{.+?\}\}/],
                },
            }),
        ],
    },
};