Native HTML

export default {
  experiments: {
    html: true,
  },
};

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>My App</title>
    <link rel="stylesheet" href="./styles.css" />
  </head>
  <body>
    <img src="./logo.png" alt="Logo" />
    <script type="module" src="./index.js"></script>
  </body>
</html>

export default {
  entry: "./src/index.html",
  experiments: {
    html: true,
    css: true,
  },
};

export default {
  entry: {
    main: "./src/main.js",
  },
  output: {
    html: true,
  },
  experiments: {
    html: true,
  },
};

import page from "./page.html";

document.querySelector("#app").innerHTML = page;

<!-- webpackIgnore: true -->
<script src="https://cdn.example.com/analytics.js"></script>

export default {
  experiments: { html: true },
  module: {
    parser: {
      html: {
        sources: [
          "...", // 내장 기본값 유지
          { tag: "img", attribute: "data-src", type: "src" },
          { tag: "img", attribute: "data-srcset", type: "srcset" },
          { attribute: "data-href", type: "src" }, // 모든 태그
          { tag: "img", attribute: "src", type: false }, // 내장 기본값 제거
        ],
      },
    },
  },
};

export default {
  experiments: { html: true },
  module: {
    parser: {
      html: {
        sources: [
          "...",
          {
            tag: "img",
            attribute: "src",
            type: "src",
            // CDN의 절대 URL은 변경하지 않습니다.
            filter: (attributes, value) => !value.startsWith("https://"),
          },
        ],
      },
    },
  },
};

export default {
  entry: "./src/index.html",
  experiments: { html: true },
  module: {
    parser: {
      html: {
        sources: ["...", { tag: "a", attribute: "href", type: "html" }],
      },
    },
  },
};

<!-- src/index.html -->
<a href="./about.html">About</a>

export default {
  entry: {
    app: "./src/app.js",
    // 이 엔트리에는 HTML 페이지를 생성하지 않습니다.
    worker: { import: "./src/worker.js", html: false },
    // 이 엔트리는 옵션 하나만 재정의합니다.
    admin: { import: "./src/admin.js", html: { title: "Admin" } },
  },
  output: { html: { title: "My App" } },
  experiments: { html: true },
};

export default {
  experiments: { html: true },
  output: {
    html: {
      title: "My App",
      meta: {
        viewport: "width=device-width, initial-scale=1",
        description: "A webpack-built app",
        "og:title": "My App",
      },
      base: { href: "/app/", target: "_self" },
    },
  },
};

export default {
  experiments: { html: true },
  output: {
    html: {
      inject: "head",
      scriptLoading: "defer",
    },
  },
};

export default {
  experiments: { html: true },
  output: {
    html: {
      // `true`는 모두 인라인 처리하고 `'script'`/`'style'`은 타입을 제한합니다.
      inline: [/^runtime/, /critical/],
    },
  },
};

<!-- webpackInline: true -->
<script src="./critical.js"></script>

export default {
  experiments: { html: true },
  output: {
    html: {
      favicon: {
        icon: [
          { href: "./favicon.svg", type: "image/svg+xml" },
          { href: "./favicon-32.png", sizes: "32x32" },
          {
            href: "./favicon-dark.png",
            media: "(prefers-color-scheme: dark)",
          },
        ],
        "apple-touch-icon": "./apple-touch-icon.png",
      },
      manifest: {
        name: "My App",
        short_name: "App",
        start_url: "/",
        display: "standalone",
        icons: [{ src: "./icon-512.png", sizes: "512x512" }],
      },
    },
  },
};

export default {
  experiments: { html: true },
  output: {
    crossOriginLoading: "anonymous",
    html: {
      integrity: true, // 또는 ['sha256', 'sha384']
      csp: {
        policy: {
          "img-src": ["'self'", "data:"],
          "connect-src": "https://api.example.com",
        },
      },
    },
  },
};

export default {
  experiments: { html: true },
  output: {
    resourceHints: {
      initial: true, // 초기 의존성 그래프에 hint 추가
      preconnect: true, // 빌드가 참조하는 origin에 미리 연결
      urlHints: [{ test: /\.woff2$/, preload: true, as: "font" }],
    },
  },
};

export default {
  experiments: { html: true },
  output: {
    resourceHints: [
      { rel: "preconnect", href: "https://cdn.example.com" },
      {
        rel: "preload",
        href: "/fonts/inter.woff2",
        as: "font",
        type: "font/woff2",
        crossorigin: true,
      },
      { rel: "prefetch", entry: "settings" },
      { rel: "preload", chunk: "runtime", fetchPriority: "high" },
    ],
  },
};

export default {
  experiments: { html: true },
  module: {
    parser: {
      html: {
        template: (source, { resource, addDependency }) => {
          addDependency(resource);
          return source
            .replaceAll("{{title}}", "Hello world")
            .replaceAll("{{image}}", "./image.png");
        },
      },
    },
  },
};

import fs from "node:fs";
import { fileURLToPath } from "node:url";
import { compile } from "handlebars";

const dataFile = fileURLToPath(new URL("./src/data.json", import.meta.url));

export default {
  experiments: { html: true },
  module: {
    parser: {
      html: {
        template: (source, { addDependency }) => {
          // 데이터가 변경되면 페이지를 다시 빌드합니다.
          addDependency(dataFile);
          const data = JSON.parse(fs.readFileSync(dataFile, "utf8"));
          return compile(source)(data);
        },
      },
    },
  },
};

export default {
  experiments: { html: true },
  module: {
    rules: [
      {
        test: /\.rows\.html$/i,
        type: "html",
        parser: { as: "tbody" },
      },
      {
        test: /\.partial\.html$/i,
        type: "html",
        parser: { as: "template" }, // 중립적인 fragment
      },
    ],
  },
};

export default {
  mode: "production",
  experiments: { html: true },
};

export default {
  mode: "production",
  experiments: { html: true },
  optimization: {
    minimize: {
      html: {
        collapseWhitespace: "smart",
        removeRedundantAttributes: "smart",
        // 명시적으로 활성화 — DOM이 다시 읽는 값을 변경합니다.
        sortAttributes: true,
        sortTokenLists: true,
        mergeStyles: true,
      },
    },
  },
};

class AddBuildStampPlugin {
  apply(compiler) {
    compiler.hooks.compilation.tap("AddBuildStamp", (compilation) => {
      const hooks =
        compiler.webpack.html.HtmlModulesPlugin.getCompilationHooks(
          compilation,
        );

      hooks.transformHtml.tap("AddBuildStamp", (html) =>
        html.replace("</body>", `<!-- built ${Date.now()} --></body>`),
      );
    });
  }
}

export default {
  module: {
    rules: [
      {
        test: /\.html$/i,
        loader: "html-loader",
        options: {
          sources: {
            list: ["...", { tag: "img", attribute: "data-src", type: "src" }],
          },
          minimize: true,
        },
      },
    ],
  },
};

export default {
  experiments: {
    html: true,
  },
  module: {
    parser: {
      html: {
        sources: ["...", { tag: "img", attribute: "data-src", type: "src" }],
      },
    },
  },
};

import page from "./page.html";

import HtmlWebpackPlugin from "html-webpack-plugin";

export default {
  entry: { main: "./src/main.js" },
  plugins: [
    new HtmlWebpackPlugin({
      title: "My App",
      scriptLoading: "defer",
      favicon: "./src/favicon.png",
      meta: { viewport: "width=device-width, initial-scale=1" },
    }),
  ],
};

export default {
  entry: { main: "./src/main.js" },
  experiments: { html: true },
  output: {
    html: {
      title: "My App",
      scriptLoading: "defer",
      favicon: "./src/favicon.png",
      meta: { viewport: "width=device-width, initial-scale=1" },
    },
  },
};

import HtmlWebpackPlugin from "html-webpack-plugin";

export default {
  entry: { main: "./src/main.js" },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./src/index.html",
      filename: "index.html",
    }),
  ],
};

<!-- src/index.html -->
<!doctype html>
<html lang="en">
  <head>
    <title>My App</title>
  </head>
  <body>
    <div id="root"></div>
    <!-- html-webpack-plugin이 여기에 script를 주입함 -->
  </body>
</html>

export default {
  entry: { index: "./src/index.html" },
  experiments: { html: true, css: true },
};

<!-- src/index.html -->
<!doctype html>
<html lang="en">
  <head>
    <title>My App</title>
    <link rel="stylesheet" href="./styles.css" />
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="./main.js"></script>
  </body>
</html>

import HtmlWebpackPlugin from "html-webpack-plugin";

export default {
  entry: { home: "./src/home.js", about: "./src/about.js" },
  plugins: [
    new HtmlWebpackPlugin({ filename: "home.html", chunks: ["home"] }),
    new HtmlWebpackPlugin({ filename: "about.html", chunks: ["about"] }),
  ],
};

export default {
  entry: {
    home: "./src/home.html",
    about: "./src/about.html",
  },
  output: {
    htmlFilename: "[name].html",
  },
  experiments: { html: true, css: true },
};

export default {
  experiments: { html: true },
  module: {
    parser: {
      html: {
        sources: true,
        as: "document",
        urlHints: [{ test: /\.woff2$/, preload: true, as: "font" }],
        template: (source) => source.replaceAll("{{title}}", "My App"),
      },
    },
  },
};

export default {
  experiments: { html: true, css: true },
  module: {
    parser: {
      html: {
        sources: [
          "...",
          { tag: "img", attribute: "data-src", type: "src" },
          { tag: "img", attribute: "data-srcset", type: "srcset" },
          { tag: "a", attribute: "href", type: "html" },
          { tag: "my-widget", attribute: "styles", type: "stylesheet-style" },
          {
            tag: "my-widget",
            attribute: "css",
            type: "stylesheet-style-attribute",
          },
          { tag: "template", attribute: "data-html", type: "srcdoc" },
          { tag: "circle", attribute: "fill", type: "css-url" },
          { attribute: "data-worker", type: "script-module" },
          // 기본값은 유지하되 `<img src>`를 URL로 처리하지 않습니다.
          { tag: "img", attribute: "src", type: false },
        ],
      },
    },
  },
};

export default {
  experiments: { html: true },
  module: {
    rules: [
      // JS에서 가져온 partial: 파일 없이 문자열만 반환합니다.
      {
        test: /\.partial\.html$/i,
        type: "html",
        generator: { extract: false },
      },
      // JS에서 가져왔지만 계속 내보내야 하는 페이지입니다.
      {
        test: /\.page\.html$/i,
        type: "html",
        generator: { extract: true },
      },
    ],
  },
};

export default {
  entry: { main: "./src/main.js" },
  experiments: { html: true, css: true },
  output: {
    htmlFilename: "[name].html",
    htmlChunkFilename: "pages/[name].[contenthash].html",
    crossOriginLoading: "anonymous",
    html: {
      title: "My App",
      meta: { viewport: "width=device-width, initial-scale=1" },
      base: { href: "/app/", target: "_self" },
      inject: "head",
      scriptLoading: "defer",
      inline: [/^runtime/],
      favicon: { icon: "./src/favicon.svg" },
      manifest: { name: "My App", short_name: "App" },
      integrity: ["sha384"],
      csp: { policy: { "img-src": ["'self'", "data:"] } },
    },
  },
};

export default {
  experiments: { html: true },
  output: {
    html: {
      favicon: (name) => `./src/icons/${name}.svg`,
      manifest: (name) => (name === "app" ? "./src/app.webmanifest" : false),
      // CDN이 재작성하는 청크에는 SRI를 적용하지 않습니다.
      integrity: ({ filename }) =>
        filename.startsWith("vendor/") ? false : ["sha384"],
    },
  },
};

export default {
  entry: {
    app: "./src/app.js",
    admin: { import: "./src/admin.js", html: { title: "Admin", csp: true } },
    worker: { import: "./src/worker.js", html: false },
  },
  output: { html: { title: "My App" } },
  experiments: { html: true },
};

export default {
  experiments: { html: true },
  output: {
    module: true,
    resourceHints: {
      initial: true,
      preconnect: true,
      dedupe: true,
      modulePreloadPolyfill: false,
      manifest: "resource-hints.json",
      urlHints: [
        { test: /\.woff2$/, preload: true, as: "font", type: "font/woff2" },
        {
          include: /\/hero\//,
          preload: true,
          as: "image",
          media: "(min-width: 800px)",
        },
        {
          test: /\.png$/,
          exclude: /\/hero\//,
          prefetch: true,
          fetchPriority: "low",
        },
      ],
    },
  },
};

export default {
  mode: "production",
  experiments: { html: true, css: true },
  optimization: {
    minimize: {
      html: {
        collapseWhitespace: "smart",
        comments: /^!/,
        removeImpliedTags: "all",
        removeRedundantAttributes: "smart",
        removeEmptyAttributes: true,
        removeEmptyElements: true,
        mergeStyles: true,
        sortAttributes: true,
        sortTokenLists: true,
      },
    },
  },
};

<!doctype html>
<html lang="en">
  <head>
    <!-- webpackPreload: true -->
    <link rel="stylesheet" href="./critical.css" />
  </head>
  <body>
    <!-- webpackIgnore: true -->
    <script src="https://cdn.example.com/analytics.js"></script>

    <!-- webpackInline: true -->
    <script src="./bootstrap.js"></script>

    <!-- webpackPrefetch: true -->
    <!-- webpackFetchPriority: "low" -->
    <img src="./below-the-fold.avif" alt="" />
  </body>
</html>

export default {
  mode: "production",
  entry: "./src/index.html",
  output: {
    filename: "js/[name].[contenthash].js",
    cssFilename: "css/[name].[contenthash].css",
    assetModuleFilename: "assets/[name].[contenthash][ext]",
    htmlFilename: "[name].html",
    clean: true,
  },
  experiments: { html: true, css: true },
};

export default {
  mode: "production",
  entry: { main: "./src/main.js" },
  optimization: { runtimeChunk: "single" },
  output: {
    html: {
      inline: [/^runtime/],
    },
  },
  experiments: { html: true, css: true },
};

import { fileURLToPath } from "node:url";

const locales = ["en", "de", "fr"];
const greetings = { en: "Hello", de: "Hallo", fr: "Bonjour" };

export default locales.map((locale) => ({
  name: locale,
  entry: { [locale]: "./src/index.html" },
  output: {
    path: fileURLToPath(new URL(`./dist/${locale}`, import.meta.url)),
    htmlFilename: "index.html",
  },
  module: {
    parser: {
      html: {
        template: (source) =>
          source
            .replaceAll("{{lang}}", locale)
            .replaceAll("{{greeting}}", greetings[locale]),
      },
    },
  },
  experiments: { html: true, css: true },
}));

export default {
  mode: "production",
  entry: "./src/index.html",
  output: {
    crossOriginLoading: "anonymous",
    html: {
      integrity: true,
      csp: true,
    },
  },
  experiments: { html: true, css: true },
};

export default {
  entry: { main: "./src/main.js" },
  output: {
    html: {
      title: "My App",
      meta: { viewport: "width=device-width, initial-scale=1" },
      favicon: "./src/icon.svg",
      manifest: {
        name: "My App",
        short_name: "App",
        start_url: "/",
        display: "standalone",
        background_color: "#ffffff",
        icons: [
          { src: "./src/icon-192.png", sizes: "192x192" },
          { src: "./src/icon-512.png", sizes: "512x512" },
        ],
      },
    },
  },
  experiments: { html: true },
};

import card from "./card.partial.html";

document.querySelector("#list").insertAdjacentHTML("beforeend", card);

export default {
  experiments: { html: true },
  module: {
    rules: [
      {
        test: /\.partial\.html$/i,
        type: "html",
        parser: { as: "template" },
        generator: { extract: false },
      },
    ],
  },
};

const template = await import("./modal.partial.html");

document.body.insertAdjacentHTML("beforeend", template.default);

export default {
  mode: "development",
  entry: "./src/index.html",
  devServer: {
    hot: true,
  },
  experiments: { html: true, css: true },
};