Merge pull request #1 from webdiscus/main

Using the new html-bundler-webpack-plugin to fix all issues
einazare · Oct 3, 2023 · 39948f0 · 39948f0
2 parents 4482c6d + 4249d0c
commit 39948f0
Show file tree

Hide file tree

Showing 6 changed files with 88 additions and 40 deletions.
diff --git a/locales/de-DE.json b/locales/de-DE.json
@@ -1,3 +1,5 @@
 {
-  "title": "Einige Titel in deutscher Sprache verfasst (Deutschland)"
+  "title": "Einige Titel in deutscher Sprache verfasst (Deutschland)",
+  "language": "Deutsch",
+  "my_language": "Meine Sprache"
 }
diff --git a/locales/en-GB.json b/locales/en-GB.json
@@ -1,3 +1,5 @@
 {
-  "title": "Some title written in English (Great Britain)"
+  "title": "Some title written in English (Great Britain)",
+  "language": "English",
+  "my_language": "My language"
 }
diff --git a/package.json b/package.json
@@ -4,22 +4,21 @@
   "description": "Trying to generate multi language single page application using Webpack and Html Webpack Plugin.",
   "main": "index.js",
   "scripts": {
-    "start": "webpack-dev-server --mode development --open --hot --port 3004",
+    "start": "webpack serve --mode development",
+    "start_": "webpack-dev-server --mode development --open --hot --port 3004",
     "build": "rm -rf ./dist && webpack --mode production",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "author": "Emanuel-Ioan Nazare",
   "license": "ISC",
   "dependencies": {
     "copy-webpack-plugin": "11.0.0",
-    "html-webpack-plugin": "5.5.0",
+    "html-bundler-webpack-plugin": "2.14.2",
     "webpack": "5.88.2",
-    "webpack-cli": "4.9.2",
-    "webpack-dev-server": "4.8.1"
+    "webpack-cli": "5.1.4",
+    "webpack-dev-server": "4.15.1"
   },
   "devDependencies": {
-    "css-loader": "6.7.1",
-    "html-loader": "4.2.0",
-    "style-loader": "3.3.1"
+    "css-loader": "6.7.1"
   }
 }
diff --git a/public/index.html b/public/index.html
@@ -8,15 +8,22 @@
     <title>
         <%= title %>
     </title>
-    <link rel="icon" href="favicon.ico">
+    <link rel="icon" href="./favicon.ico">
     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css"
         integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous" />
+    <script>
+        // note: defaults, the template engine is `Eta`, to pass unescaped vars, use the `~` char instead of `=`
+        var locales = <%~ locales %>;
+    </script>
+    <script src="../src/index.js" defer="defer"></script>
 </head>
 
 <body>
     <h1>
         <%= title %>
     </h1>
+    <h2><%= i18n.my_language %>: "<%= i18n.language %>"</h2>
+    <a href="/">EN</a> | <a href="/de-DE/index.html">DE</a>
 </body>
 
 </html>
diff --git a/src/index.js b/src/index.js
@@ -1,3 +1,4 @@
 (function () {
-  console.log("<%= title %>");
+  // note: the `locales` is the stringified JSON from <script>var locales = {title:'...', ...};</script> tag in HTML
+  console.log("title: ", locales.title, { locales });
 })();
diff --git a/webpack.config.js b/webpack.config.js
@@ -1,39 +1,76 @@
 const path = require('path');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
+const HtmlBundlerPlugin = require('html-bundler-webpack-plugin');
 
 const languages = {
   "de-DE": require("./locales/de-DE.json"),
   "en-GB": require("./locales/en-GB.json"),
 };
 
-module.exports = Object.keys(languages).map(language => {
-  return {
-    entry: './src/index.js',
-    output: {
-      path: path.join(__dirname, `/dist${language === "en-GB" ? "" : `/${language}`}`),
-      filename: 'index.js',
-    },
-    module: {
-      rules: [
-        {
-          test: /\.html$/,
-          use: ["html-loader"]
+module.exports = {
+  output: {
+    path: path.join(__dirname, '/dist'),
+  },
+  module: {
+    rules: [
+      {
+        test: /\.css$/i,
+        use: ["css-loader"],
+      },
+      {
+        test: /\.(ico|png|jp?g|webp|svg)$/,
+        type: 'asset/resource',
+        generator: {
+          filename: 'img/[name].[hash:8][ext][query]',
+        },
+      },
+    ],
+  },
+  plugins: [
+    new HtmlBundlerPlugin({
+      // define templates here
+      // you can generate this `entry` object instead of multiple configurations for HtmlWebpackPlugin
+      entry: {
+        index : { // => dist/index.html
+          import: './public/index.html',
+          data: {
+            // pass variables into the template
+            title: languages['en-GB'].title,
+            // - OR - you can pass completelly all translates into template, then use in template as `i18n.title`
+            i18n: languages['en-GB'],
+            // pass data into inline JS, that are accessible from a JS file
+            locales: JSON.stringify(languages['en-GB']),
+          }
         },
-        {
-          test: /\.css$/i,
-          use: ["style-loader", "css-loader"],
+        'de-DE/index' : { // => dist/de-DE/index.html
+          import: './public/index.html',
+          data: {
+            // pass variables into the template
+            title: languages['de-DE'].title,
+            // - OR - you can pass completelly all translates into template, then use in template as `i18n.title`
+            i18n: languages['de-DE'],
+            // pass data into inline JS, that are accessible from a JS file
+            locales: JSON.stringify(languages['de-DE']),
+          }
         },
-      ],
+      },
+      js: {
+        // JS output filename
+        filename: '[name].[contenthash:8].js'
+      },
+      css: {
+        // CSS output filename
+        filename: '[name].[contenthash:8].css',
+        //inline: 'true', // you can inline CSS into HTML
+      }
+    }),
+  ],
+  devServer: {
+    static: path.join(__dirname, 'dist'),
+    watchFiles: {
+      paths: ['src/**/*.*'],
+      options: {
+        usePolling: true,
+      },
     },
-    plugins: [
-      new HtmlWebpackPlugin({
-        template: './public/index.html',
-        minify: false,
-        hash: true,
-        templateParameters: {
-          title: languages[language].title
-        }
-      })
-    ]
-  };
-});
+  },
+}