feature: add webpack config and util files

webpack/utils/file-utils.js

@@ -0,0 +1,20 @@
+const fs = require('fs');
+const path = require('path');
+const process = require('process');
+
+function getFilenamesFromPath(workingFolder, extension) {
+    console.log(process.cwd());
+    const files = [];
+    const folderPath = path.join(__dirname, workingFolder);
+    fs.readdirSync(folderPath)
+        .forEach(file => {
+            if( file.match(new RegExp(`.*\.(${extension})`, 'ig'))) {
+                files.push(path.parse(file).name)
+            }
+        })
+    return files;
+}
+
+module.exports = {
+    getFilenamesFromPath
+}

webpack/webpack.common.config.js

@@ -0,0 +1,46 @@
+const path = require('path');
+const fs = require('fs');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const { CleanWebpackPlugin } = require("clean-webpack-plugin");
+const { getFilenamesFromPath } = require('./utils/file-utils.js');
+const listOfHtmlFiles = getFilenamesFromPath('../../src', 'html');
+const entry = listOfHtmlFiles.reduce((entries, fileName) => {
+	entries[fileName] = path.join(__dirname, `../src/js/${fileName}.js`);
+	return entries;
+}, {});
+const htmlGenerators = listOfHtmlFiles.reduce((entries, fileName) => {
+	entries.push(new HtmlWebpackPlugin({
+		inject: true,
+        template: `./src/${fileName}.html`,
+        filename: `${fileName}.html`,
+		chunks: [fileName],
+	}));
+	return entries;
+}, []);
+
+const config ={
+    entry,
+    output: {
+        filename: "[name].js",
+        path: path.resolve(__dirname, "../dist/"),
+    },
+    module: {
+        rules: [
+            {
+                test: /\.html$/,
+                use: [
+                    {
+                        loader: 'html-loader'
+                    }
+                ]
+            },
+        ]
+    },
+    plugins: [
+        new CleanWebpackPlugin(),
+        ...htmlGenerators,
+    ],
+
+}
+
+module.exports = config

webpack/webpack.dev.config.js

@@ -0,0 +1,48 @@
+const common = require('./webpack.common.config');
+const { merge } = require('webpack-merge');
+const path = require('path');
+
+module.exports = merge(common, {
+    output: {
+        filename: 'js/[name].js'
+    },
+    mode: 'development',
+    devServer: {
+        port: 9000,
+        static: {
+            directory: path.resolve(__dirname, '../dist')
+        },
+        devMiddleware: {
+            index: 'index.html',
+            writeToDisk: true
+        },
+        client: {
+            overlay: true
+        },
+        liveReload: false
+    },
+    module: {
+        rules:[
+            {
+                test: /\.css$/,
+                use: ['style-loader', 'css-loader']
+            },
+            {
+                test: /\.scss$/,
+                use: [ 'style-loader', 'css-loader', 'sass-loader' ],
+            },
+            {
+                test: /\.(png|jpg|svg)$/,
+                type: 'asset',
+                parser: {
+                    dataUrlCondition: {
+                        maxSize: 10 * 1024,
+                    }
+                },
+                generator: {
+                    filename: './images/[name][ext]'
+                }
+            }
+        ]
+    }
+})

webpack/webpack.prod.config.js

@@ -0,0 +1,63 @@
+const common = require('./webpack.common.config');
+const { merge } = require('webpack-merge');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const path = require('path');
+const glob = require('glob');
+const { PurgeCSSPlugin } = require('purgecss-webpack-plugin')
+
+
+module.exports = merge(common, {
+    mode: 'production',
+    output: {
+        filename: 'js/[name].[contenthash:10].js'
+    },
+    module: {
+        rules:[
+            {
+                test: /\.css$/,
+                use: [ MiniCssExtractPlugin.loader, 'css-loader' ]
+            },
+            {
+                test: /\.scss$/,
+                use: [ MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'sass-loader' ],
+            },
+            {
+                test: /\.(png|jpg|svg)$/,
+                type: 'asset',
+                parser: {
+                    dataUrlCondition: {
+                        maxSize: 10 * 1024,
+                    }
+                },
+                generator: {
+                    filename: './images/[name].[contenthash:10][ext]'
+                },
+                use: [
+                    {
+                        loader: 'image-webpack-loader',
+                        options: {
+                            mozjpeg: {
+                                quality: 40
+                            },
+                            pngquant: {
+                                quality: [0.65, 0.90],
+                                speed: 4
+                            }
+                        }
+                    }
+                ]
+            }
+        ]
+    },
+    plugins:[
+        new MiniCssExtractPlugin({
+            filename: 'css/[name].[contenthash:10].css'
+        }),
+        new PurgeCSSPlugin({
+            paths: glob.sync(
+                `${path.join(__dirname, '../src')}/**/*`,
+                { nodir: true }
+            )
+        })
+    ]
+})