Added: automaticlly create any html pages

README.md

@@ -72,6 +72,30 @@ import 'bootstrap/dist/js/bootstrap.min.js'
 import './common.js'
 ```
 
+## Create Another HTML Files:
+Default: **Automatic creation any html pages:**
+1. Create another html file in `./src` (main folder)
+2. Open new page `http://localhost:8081/about.html` (Don't forget to RERUN dev server)
+
+**Second method:**
+1. Create another html file in `./src` (main folder)
+2. Go to `./build/webpack.base.conf.js`
+3. Comment lines above (create automaticlly html pages)
+4. Create new page in html:
+``` js
+    new HtmlWebpackPlugin({
+      template: `${PATHS.src}/index.html`,
+      filename: './index.html',
+      inject: true
+    }),
+    new HtmlWebpackPlugin({
+      template: `${PATHS.src}/another.html`,
+      filename: './another.html',
+      inject: true
+    }),
+```
+5. Open new page `http://localhost:8081/about.html` (Don't forget to RERUN dev server)
+
 ### Vue install
 Default: already have
 

build/webpack.base.conf.js

@@ -1,14 +1,18 @@
 const path = require('path')
+const fs = require('fs')
 const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 const CopyWebpackPlugin = require('copy-webpack-plugin')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
 const { VueLoaderPlugin } = require('vue-loader')
 
+// Main const
 const PATHS = {
   src: path.join(__dirname, '../src'),
   dist: path.join(__dirname, '../dist'),
   assets: 'assets/'
 }
+// Pages const for HtmlWebpackPlugin
+const PAGES = fs.readdirSync(PATHS.src).filter(fileName => fileName.endsWith('.html'))
 
 module.exports = {
   // BASE config
@@ -103,16 +107,24 @@ module.exports = {
     new MiniCssExtractPlugin({
       filename: `${PATHS.assets}css/[name].[hash].css`,
     }),
-    // Copy HtmlWebpackPlugin and change index.html for another html page
-    new HtmlWebpackPlugin({
-      template: `${PATHS.src}/index.html`,
-      filename: './index.html',
-      inject: true
-    }),
     new CopyWebpackPlugin([
       { from: `${PATHS.src}/${PATHS.assets}img`, to: `${PATHS.assets}img` },
       { from: `${PATHS.src}/${PATHS.assets}fonts`, to: `${PATHS.assets}fonts` },
       { from: `${PATHS.src}/static`, to: '' },
-    ])
+    ]),
+
+    // Automatic creation any html pages (Don't forget to RERUN dev server)
+    ...PAGES.map(page => new HtmlWebpackPlugin({
+      template: `${PATHS.src}/${page}`,
+      filename: `./${page}`
+    })),
+
+    // Manual (not Automaticlly) creation any html pages (Don't forget to RERUN dev server and COMMENT lines above)
+    // new HtmlWebpackPlugin({
+    //   template: `${PATHS.src}/index.html`,
+    //   filename: './index.html',
+    //   inject: true
+    // }),
+
   ],
 }

src/js/index.js

@@ -1,2 +1 @@
 // Main js file
-