Merge pull request #3 from camejuanm/production-optimized

Production optimized

package.json

@@ -1,11 +1,11 @@
 {
-  "name": "startertemplate",
-  "version": "1.0.0",
+  "name": "camejuanm-web",
+  "version": "2.0",
   "description": "",
   "main": "index.js",
   "scripts": {
-    "build": "webpack --mode development",
-    "start": "npm run build && webpack-dev-server --open --mode development",
+    "build": "webpack --config webpack.prod.js",
+    "start-dev": "webpack serve --open --config webpack.dev.js",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "keywords": [],
@@ -15,13 +15,14 @@
     "autoprefixer": "^10.4.12",
     "css-loader": "^6.7.1",
     "file-loader": "^6.2.0",
-    "mini-css-extract-plugin": "^2.6.1",
+    "mini-css-extract-plugin": "^2.7.6",
     "node-sass": "^7.0.3",
     "sass-loader": "^13.1.0",
     "style-loader": "^3.3.1",
     "webpack": "^5.74.0",
     "webpack-cli": "^4.10.0",
-    "webpack-dev-server": "^4.11.1"
+    "webpack-dev-server": "^4.11.1",
+    "webpack-merge": "^5.9.0"
   },
   "dependencies": {
     "@popperjs/core": "^2.11.6",

src/html/index.html

@@ -80,7 +80,7 @@ <h6>It's under construction.</h6>
         <div class="col-sm col-md-6 p-2">
           <figure class="figure">
             <img
-              src="./../assets/images/stock-puppy-photo.jpg"
+              src="./../assets/images/stock-puppy-photo-800-433.jpg"
               class="figure-img rounded w-100"
               alt="A picture of a puppy" />
             <figcaption class="figure-caption">
@@ -97,6 +97,9 @@ <h6>It's under construction.</h6>
               <p>
                 "Now with dark mode! Try toggling your system theme color, or you can try changing 'prefers-color-scheme' setting."
               </p>
+              <p>
+                June 2023 update: now a lot faster!
+              </p>
             </blockquote>
             <figcaption class="blockquote-footer">
               <i>Message for visitors</i>

src/js/main.js

@@ -78,4 +78,9 @@ window.addEventListener('DOMContentLoaded', () => {
 
 //     //   console.log(`Dark mode is ${darkModeOn ? '🌒 on' : '☀️ off'}.`);
 //     //   darkModeOn ? document.getElementsByTagName('figcaption').innerHTML = "Don't be naugthy, dark mode is not supported!" : document.getElementsByTagName('figcaption').innerHTML = "Good boi!"
-// });
+// });
+if (process.env.NODE_ENV !== 'production') {
+
+  console.log('Looks like we are in development mode!');
+
+}

webpack.common.js

@@ -0,0 +1,80 @@
+const path = require('path');
+
+const loader = require('sass-loader');
+
+// const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+
+
+
+
+module.exports = {
+
+    entry: './src/js/main.js',
+
+    output: {
+
+      filename: '[name].[contenthash].js',
+
+      path: path.resolve(__dirname, 'dist'),
+
+      clean: true,
+
+      assetModuleFilename: "assets/images/[name].[hash][ext]",
+
+    },
+
+    module: {
+
+      rules: [
+
+        // {
+
+        //   test: /\.(s(a|c)ss)$/,
+
+        //   use: ['style-loader', 'css-loader', 'sass-loader']
+
+        // },
+
+        {
+
+          test: /\.(png|jpe?g|gif|svg)$/i,
+
+          type: 'asset/resource'
+
+      },
+
+        {
+
+          test: /\.html$/,
+
+          use: [
+
+            'html-loader'
+
+          ]
+
+        },
+
+
+
+      ]
+
+    },
+
+    plugins: [
+
+      new HtmlWebpackPlugin({
+
+        inject: 'body',
+
+        template: './src/html/index.html',
+
+        filename: 'index.html'
+
+      })
+
+    ]
+
+  };

webpack.config.js

@@ -1,4 +1,4 @@
-
+// Old config, not going to be used anymore after v2.0
 const path = require('path');
 const loader = require('sass-loader');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
@@ -16,7 +16,7 @@ module.exports = {
   devtool: 'eval-source-map',
   devServer: {
     static: path.resolve(__dirname, 'dist'),
-    port: 8080,
+    port: 3000,
     hot: true
   },
   module: {

webpack.dev.js

@@ -0,0 +1,48 @@
+const { merge } = require('webpack-merge');
+
+const common = require('./webpack.common.js');
+
+
+
+
+module.exports = merge(common, {
+
+    mode: "development",
+
+    devtool: 'eval-source-map',
+
+    devServer: {
+
+      static: './dist',
+
+      compress: false,
+
+      allowedHosts: "all",
+
+      port: 3001,
+
+    },
+
+    watchOptions: {
+
+      poll: 1000, // Check for changes every second
+
+    },
+
+    module: {
+
+        rules: [
+
+            {
+
+                test: /\.(s(a|c)ss)$/,
+
+                use: ['style-loader', 'css-loader', 'sass-loader']
+
+              },
+
+        ]
+
+    }
+
+  });

webpack.prod.js

@@ -0,0 +1,52 @@
+const { merge } = require('webpack-merge');
+
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+
+const common = require('./webpack.common.js');
+
+
+
+
+module.exports = merge(common, {
+
+    mode: "production",
+
+    devtool: 'source-map',
+
+    module: {
+
+        rules: [
+
+          {
+
+            test: /\.(s(a|c)ss)$/,
+
+            use: [
+
+              MiniCssExtractPlugin.loader,
+
+              'css-loader',
+
+              'sass-loader',
+
+            ],
+
+          },
+
+        ],
+
+      },
+
+      plugins: [
+
+        new MiniCssExtractPlugin({
+
+          filename: '[name].[contenthash].css',
+
+          chunkFilename: "[id].[contenthash].css",
+
+        }),
+
+      ]
+
+});