refactor: webpack auto read file name, component navigation

cslant · May 1, 2024 · b3badbd · b3badbd
1 parent 3fbd092
commit b3badbd
Show file tree

Hide file tree

Showing 5 changed files with 85 additions and 52 deletions.
diff --git a/component/nav.html b/component/nav.html
@@ -0,0 +1,16 @@
+<div class="git-notifier-sidebar__container">
+  <div class="git-notifier-sidebar__content">
+    <div class="git-notifier-sidebar__content-head">
+      <p class="git-notifier-sidebar__content-logo">CSLANT</p>
+    </div>
+    <ul class="git-notifier-sidebar__list-container">
+      <li class="git-notifier-sidebar__list-item"><a href="#">Home</a></li>
+      <li class="git-notifier-sidebar__list-item"><a href="#">item1</a></li>
+      <li class="git-notifier-sidebar__list-item"><a href="#">item2</a></li>
+      <li class="git-notifier-sidebar__list-item"><a href="#">item3</a></li>
+      <li class="git-notifier-sidebar__list-item"><a href="#">item4</a></li>
+      <li class="git-notifier-sidebar__list-item"><a href="#">item5</a></li>
+    </ul>
+  </div>
+</div>
+<!--add script logic (optional)-->
diff --git a/html/index.html b/html/index.html
@@ -7,27 +7,9 @@
 </head>
 
 <body>
-    <nav>
-        <div class="git-notifier-sidebar__container">
-            <div class="git-notifier-sidebar__content">
-                <div class="git-notifier-sidebar__content-head">
-                    <p class="git-notifier-sidebar__content-logo">CSLANT</p>
-                </div>
-                <ul class="git-notifier-sidebar__list-container">
-                    <li class="git-notifier-sidebar__list-item"><a href="#">Home</a></li>
-                    <li class="git-notifier-sidebar__list-item"><a href="#">item1</a></li>
-                    <li class="git-notifier-sidebar__list-item"><a href="#">item2</a></li>
-                    <li class="git-notifier-sidebar__list-item"><a href="#">item3</a></li>
-                    <li class="git-notifier-sidebar__list-item"><a href="#">item4</a></li>
-                    <li class="git-notifier-sidebar__list-item"><a href="#">item5</a></li>
-                </ul>
-            </div>
-        </div>
-    </nav>
-
-
+    <nav></nav>
     <div class="git-notifier-main-content__container">
-        
+
         <div class="git-notifier-main-content__header">
             <div class="git-notifier-main-content__mode">
                 <input type="checkbox" id="toggleSystemMode">
@@ -42,8 +24,6 @@
 
         </div>
     </div>
-
-
 </body>
 
-</html>
+</html>
diff --git a/inject-multiple-components-loader.js b/inject-multiple-components-loader.js
@@ -0,0 +1,14 @@
+const fs = require('fs');
+const path = require('path');
+
+module.exports = function(source) {
+  const components = this.getOptions().components || [];
+
+  components.forEach(component => {
+    const componentPath = path.resolve(__dirname, component.path);
+    const componentHtml = fs.readFileSync(componentPath, 'utf8');
+    source = source.replace(component.placeholder, `<div>${componentHtml}</div>`);
+  });
+
+  return source;
+};
diff --git a/package.json b/package.json
@@ -46,6 +46,7 @@
     "serve": "webpack serve"
   },
   "dependencies": {
+    "html-loader": "^5.0.0",
     "node-sass": "^9.0.0"
   }
 }
diff --git a/webpack.config.js b/webpack.config.js
@@ -1,43 +1,62 @@
 // Generated using webpack-cli https://github.com/webpack/webpack-cli
 
 const path = require('path');
+const fs = require('fs');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 
 const isProduction = process.env.NODE_ENV === 'production';
 
 const stylesHandler = MiniCssExtractPlugin.loader;
 
-let htmlPageNames = ['example1'];
-let multipleHtmlPlugins = htmlPageNames.map(name => {
-    return new HtmlWebpackPlugin({
-        template: `html/${name}.html`, // relative path to the HTML files
-        filename: `${name}.html`, // output HTML files
-        chunks: [`${name}`] // respective JS files
-    })
+// read all html files in 'html' folder
+const htmlDirectory = path.resolve(__dirname, 'html');
+
+// get all html file names except 'index.html'
+const htmlPageNames = fs.readdirSync(htmlDirectory)
+.filter(file => file.endsWith('.html') && file !== 'index.html')
+.map(file => file.replace('.html', ''));
+
+const multipleHtmlPlugins = htmlPageNames.map(name => {
+  return new HtmlWebpackPlugin({
+    template: `${htmlDirectory}/${name}.html`,
+    filename: `${name}.html`,
+    chunks: [name]
+  });
 });
 
+
+function generateComponentOptions(componentDir) {
+  const directoryPath = path.resolve(__dirname, componentDir);
+  const components = fs.readdirSync(directoryPath)
+  .filter(file => file.endsWith('.html'))
+  .map(file => ({
+    path: path.join(componentDir, file),
+    placeholder: `<${path.basename(file, '.html')}></${path.basename(file, '.html')}>`
+  }));
+
+  return components;
+}
+
+const components = generateComponentOptions('./component');
+
 const config = {
-    entry: './src/index.ts',
+  entry: './src/index.ts',
     output: {
-        path: path.resolve(__dirname, 'dist'),
-    },
+    path: path.resolve(__dirname, 'dist')
+  },
     devServer: {
-        open: true,
-        host: 'localhost',
-    },
+    open: true,
+    host: 'localhost'
+  },
     plugins: [
         new HtmlWebpackPlugin({
-            template: 'html/index.html',
+            template: `${htmlDirectory}/index.html`
         }),
-
         new MiniCssExtractPlugin({
             filename: '[name].css',
             chunkFilename: '[id].css',
         }),
-
-        // Add your plugins here
-        // Learn more about plugins from https://webpack.js.org/configuration/plugins/
     ].concat(multipleHtmlPlugins),
     module: {
         rules: [
@@ -54,21 +73,24 @@ const config = {
                 test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i,
                 type: 'asset',
             },
-
-            // Add your rules for custom modules here
-            // Learn more about loaders from https://webpack.js.org/loaders/
+            {
+              test: /\.html$/,
+              use: [
+                'html-loader',
+                {
+                  loader: path.resolve(__dirname, 'inject-multiple-components-loader.js'),
+                  options: {
+                    components: components
+                  }
+                }
+              ]
+            },
         ],
     },
     resolve: {
         extensions: ['.tsx', '.ts', '.jsx', '.js', '...'],
     },
+    mode: isProduction ? 'production' : 'development'
 };
 
-module.exports = () => {
-    if (isProduction) {
-        config.mode = 'production';
-    } else {
-        config.mode = 'development';
-    }
-    return config;
-};
+module.exports = config;