added webpack-pages config to automate HtmlWebpackPlugin

vedees · Dec 3, 2023 · a4b7333 · a4b7333
1 parent fa080ea
commit a4b7333
Show file tree

Hide file tree

Showing 7 changed files with 222 additions and 98 deletions.
diff --git a/README.md b/README.md
@@ -58,30 +58,86 @@ yarn build
 Configs:
 
 - `/babel-defines.js` - config for babel
-- `/webpack/webpack-defines.js` - config for webpack
+- `/webpack/webpack-pages.js` - config for html pages
+- `/webpack/webpack-defines.js` - config for entire webpack
 
 Main entry point:
 
 - `src/app/index.ts` - core entry point
 
-## Config:
+## Defines:
+
+Core webpack config from `/webpack/webpack-defines.js`:
 
 ```js
 const PATHS = {
-  // path to the Src dir
+  // path to the src dir
   src: path.join(__dirname, '../src'),
-  // path to the Output dir
+  // path to the output dir
   dist: path.join(__dirname, '../dist'),
-  // path to your html files
+  // path to the public files (html files)
   public: path.join(__dirname, '../public'),
 
-  // Path to Output sub dir (js, css, fonts, etc.)
+  // path to output sub dir (js, css, fonts, etc.)
   assets: 'assets/',
-  // Path to Output sub dir (img, icons, etc.)
+  // path to output sub dir (img, icons, etc.)
   static: 'static/'
 }
 ```
 
+## Pages config:
+
+Pages config from `/webpack/webpack-pages.js`:
+
+```js
+const pages = [
+  {
+    // page title
+    title: 'Home page',
+    // template name `public/index.html`
+    template: 'index.html',
+    // output filename `dist/index.html`
+    filename: 'index.html',
+
+    // other options can be here
+  },
+  {
+    title: 'About page',
+    template: 'about.html',
+    filename: 'about.html',
+  }
+]
+```
+
+You can pass a hash of configuration options to html-webpack-plugin.
+
+Allowed values are as follows:  https://github.com/jantimon/html-webpack-plugin#options
+
+## Manual pages setup:
+
+In case if you don't want to use Pages config:
+
+1. Create another html file in `./public`
+2. Go to `./webpack/webpack.common.js`
+3. Add new page to the config:
+
+```js
+    // index page:
+    new HtmlWebpackPlugin({
+      title: 'Home page',
+      favicon: defines.src + '/shared/misc/favicon.ico',
+      template: defines.public + '/index.html', // public/index.html page
+      filename: 'index.html' // output file
+    }),
+    // about page:
+    new HtmlWebpackPlugin({
+      title: 'About page',
+      favicon: defines.src + '/shared/misc/favicon.ico',
+      template: defines.public + '/about.html', // public/about.html page
+      filename: 'about.html' // output file
+    }),
+```
+
 ## Import libs example:
 
 Install it:
@@ -112,27 +168,54 @@ Import libs to `src/app/index.scss`:
 @import '../../node_modules/flickity/dist/flickity.css';
 ```
 
-## HTML dir folder:
+## React example:
 
-1. Create another html file in `./public`
-2. Go to `./webpack/webpack.common.js`
-3. Add new page to the config:
+Here's an example with React + i18n Provider.
 
-```js
-    // index page:
-    new HtmlWebpackPlugin({
-      title: 'My app',
-      favicon: defines.src + '/shared/misc/favicon.ico',
-      template: defines.public + '/index.html', // public/index.html page
-      filename: 'index.html' // output file
-    }),
-    // another page:
-    new HtmlWebpackPlugin({
-      title: 'My app',
-      favicon: defines.src + '/shared/misc/favicon.ico',
-      template: defines.public + '/another.html', // public/another.html page
-      filename: 'another.html' // output file
-    }),
+Install react:
+
+```bash
+yarn add react react-dom
+```
+
+Create div with id `app` in `public/index.html`:
+
+```html
+<div id="app"></div>
+```
+
+Init the app in `src/app/index.ts`:
+
+```tsx
+import React from 'react'
+import { createRoot } from 'react-dom/client'
+
+// app styles
+import './index.scss'
+
+// local providers:
+import { I18nProvider } from './providers/I18nProvider'
+
+const container = document.getElementById('app') as HTMLElement
+const root = createRoot(container)
+
+root.render(
+  <React.StrictMode>
+    <I18nProvider>...</I18nProvider>
+  </React.StrictMode>
+)
+```
+
+File `src/app/providers/I18nProvider.tsx`:
+
+```tsx
+import React, { FC, PropsWithChildren } from 'react'
+
+export const I18nProvider: FC<PropsWithChildren> = ({ children }) => {
+  // ...
+
+  return <I18n locale={detectedLocale}>{children}</I18n>
+}
 ```
 
 ## Vue example:
@@ -198,56 +281,6 @@ components: {
 }
 ```
 
-## React example:
-
-Here's an example with React + i18n Provider.
-
-Install react:
-
-```bash
-yarn add react react-dom
-```
-
-Create div with id `app` in `public/index.html`:
-
-```html
-<div id="app"></div>
-```
-
-Init the app in `src/app/index.ts`:
-
-```tsx
-import React from 'react'
-import { createRoot } from 'react-dom/client'
-
-// app styles
-import './index.scss'
-
-// local providers:
-import { I18nProvider } from './providers/I18nProvider'
-
-const container = document.getElementById('app') as HTMLElement
-const root = createRoot(container)
-
-root.render(
-  <React.StrictMode>
-    <I18nProvider>...</I18nProvider>
-  </React.StrictMode>
-)
-```
-
-File `src/app/providers/I18nProvider.tsx`:
-
-```tsx
-import React, { FC, PropsWithChildren } from 'react'
-
-export const I18nProvider: FC<PropsWithChildren> = ({ children }) => {
-  // ...
-
-  return <I18n locale={detectedLocale}>{children}</I18n>
-}
-```
-
 ## Adding Google Fonts:
 
 Connect fonts to `public/index.html`:
@@ -271,7 +304,7 @@ html {
 In case if you don't want to use Google Fonts:
 
 - Download fonts
-- Add fonts to the `src/shared/fonts/FontName/`
+- Add fonts to the (i.g. `/src/shared/fonts/OpenSans/...`).
 
 Then add `@font-face` in some `.scss` file (i.g. `/src/app/styles/font.scss`):
 
@@ -288,9 +321,9 @@ Then add `@font-face` in some `.scss` file (i.g. `/src/app/styles/font.scss`):
 }
 ```
 
-Paste your fonts to the: `/src/shared/fonts` (i.g. `/src/shared/fonts/OpenSans/...`).
+The last step is to copy these fonts into the `/dist` folder every time you build the project.
 
-Add copy files config in `/webpack/webpack.common.js`:
+Add another config for `CopyWebpackPlugin` to `/webpack/webpack.common.js`:
 
 ```js
 new CopyWebpackPlugin({

diff --git a/public/about.html b/public/about.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <title>Webpack Template</title>
+  </head>
+  <body>
+    <div style="padding: 2rem; max-width: 720px; margin: 0 auto">
+      <img src="/static/img/webpack.svg" style="width: 100%; max-width: 400px; height: auto" />
+      <div style="font-size: 1.75rem">It works!</div>
+
+      <!-- pages list -->
+      <!-- based on `webpack-pages.js` -->
+      <ul style="padding: 1rem">
+        <li style="padding-bottom: 0.5rem">
+          <a href="/" style="color: blue">Home page</a>
+        </li>
+        <li style="padding-bottom: 0.5rem">
+          <a href="/about" style="color: blue">About page (active)</a>
+        </li>
+        <li style="padding-bottom: 0.5rem">
+          <a href="https://github.com/vedees/webpack-template/blob/webpack5/README.md" target="_blank" style="color: blue">Documentation</a>
+        </li>
+      </ul>
+    </div>
+  </body>
+</html>
diff --git a/public/index.html b/public/index.html
@@ -7,10 +7,23 @@
     <title>Webpack Template</title>
   </head>
   <body>
-    <div style="text-align: center">
-      <img src="/static/webpack.svg" style="width: 100%; max-width: 400px; height: auto" />
-      <div style="padding: 2rem; font-size: 1.75rem">It works!</div>
-      <a href="https://github.com/vedees/webpack-template/blob/webpack5/README.md" style="color: blue;">Documentation</a>
+    <div style="padding: 2rem; max-width: 720px; margin: 0 auto">
+      <img src="/static/img/webpack.svg" style="width: 100%; max-width: 400px; height: auto" />
+      <div style="font-size: 1.75rem">It works!</div>
+
+      <!-- pages list -->
+      <!-- based on `webpack-pages.js` -->
+      <ul style="padding: 1rem">
+        <li style="padding-bottom: 0.5rem">
+          <a href="/" style="color: blue">Home page (active)</a>
+        </li>
+        <li style="padding-bottom: 0.5rem">
+          <a href="/about.html" style="color: blue">About page</a>
+        </li>
+        <li style="padding-bottom: 0.5rem">
+          <a href="https://github.com/vedees/webpack-template/blob/webpack5/README.md" target="_blank" style="color: blue">Documentation</a>
+        </li>
+      </ul>
     </div>
   </body>
 </html>
diff --git a/src/app/styles/body.scss b/src/app/styles/body.scss
@@ -6,19 +6,19 @@
 
 body,
 html {
-  height: 100%;
   margin: 0;
   padding: 0;
 }
 
 html {
-  font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, 'Apple Color Emoji', Arial, sans-serif, 'Segoe UI Emoji', 'Segoe UI Symbol' !important;
-  font-size: 18px;
-  //
   scroll-behaviour: smooth;
 }
 
 body {
   position: relative;
-  text-rendering: optimizeSpeed;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Roboto, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
+  font-size: 18px;
+  fill: currentcolor;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
diff --git a/webpack/webpack-defines.js b/webpack/webpack-defines.js
@@ -1,19 +1,20 @@
-// real paths to the dirs
-
 const path = require('path')
 
 const dirs = {
+  // path to the Src dir
   src: path.join(__dirname, '../src'),
+  // path to the Output dir
   dist: path.join(__dirname, '../dist'),
+  // path to your html files
   public: path.join(__dirname, '../public')
 }
 
 const subDirs = {
-  // sub folder for css / js
+  // path to Output sub dir (js, css, fonts, etc.)
   // i.g. `dist/assets/css/` & dist/assets/js/
   assets: 'assets/',
 
-  // sub folder for shared images, etc.
+  // path to Output sub dir (img, icons, etc.)
   // i.g. `dist/static/img/` & `dist/static/fonts/`
   static: 'static/'
 }

diff --git a/webpack/webpack-pages.js b/webpack/webpack-pages.js
@@ -0,0 +1,27 @@
+// automation for `HtmlWebpackPlugin`
+
+// Notes:
+// - remember to restart server after new page added
+// - link on the html must be with .html suffix (i.g. <a href="/about.html">About</a>)
+
+const pages = [
+  {
+    // page title
+    title: 'Home page',
+    // template name `public/index.html`
+    template: 'index.html',
+    // output filename `dist/index.html`
+    filename: 'index.html'
+
+    // you can pass a hash of configuration options to html-webpack-plugin.
+    // Allowed values are as follows:
+    // read more: https://github.com/jantimon/html-webpack-plugin#options
+  },
+  {
+    title: 'About page',
+    template: 'about.html',
+    filename: 'about.html'
+  }
+]
+
+module.exports = pages