creates website locally

Visionary-Code-Works · May 19, 2024 · 47b29db · 47b29db
1 parent 2894b2a
commit 47b29db
Show file tree

Hide file tree

Showing 10 changed files with 174 additions and 7 deletions.
diff --git a/.sass-cache/14c3e9453ddc25212bc106af2f9bd5dfc4f6da67/custom-bootstrap.scssc b/.sass-cache/14c3e9453ddc25212bc106af2f9bd5dfc4f6da67/custom-bootstrap.scssc
diff --git a/dist/bundle.js b/dist/bundle.js
diff --git a/dist/bundle.js.gz b/dist/bundle.js.gz
diff --git a/dist/bundle.js.map b/dist/bundle.js.map
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -73,6 +73,7 @@
     "stylelint-config-standard": "^36.0.0",
     "stylelint-scss": "^6.3.0",
     "webpack": "^5.91.0",
+    "webpack-bundle-analyzer": "^4.10.2",
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^4.15.2",
     "webpack-merge": "^5.10.0"

diff --git a/src/index.html b/src/index.html
@@ -1,12 +1,13 @@
+<!-- index.html -->
 <!DOCTYPE html>
 <html lang="en">
 
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>My Project</title>
+  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
 </head>
-
 <body>
   <header class="header">
     <div class="header-logo">Logo</div>
@@ -17,6 +18,7 @@
       </ul>
     </nav>
   </header>
+  <div id="root"></div>
 
   <main class="container">
     <h1>Welcome to My Project</h1>
@@ -32,6 +34,10 @@ <h1>Welcome to My Project</h1>
   </footer>
 
   <script src="dist/bundle.js"></script>
+  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
+  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
+  <script src="bundle.js"></script>
 </body>
 
 </html>
diff --git a/src/scss/main.scss b/src/scss/main.scss
@@ -1,6 +1,6 @@
 /* main.scss */
 
-use "sass:math";
+@use "sass:math";
 
 /* Abstracts */
 @import 'abstracts/variables';

diff --git a/src/scss/vendors/custom-bootstrap.scss b/src/scss/vendors/custom-bootstrap.scss
@@ -1,11 +1,10 @@
 /* src/scss/vendors/custom-bootstrap.scss */
 @import "../abstracts/variables"; // Ensure your custom variables are imported first
-@import "bootstrap/scss/bootstrap";
 
 /* Override Bootstrap variables here */
 $font-size-base: 1rem; // Example variable override
 $line-height-base: 1.5;
 $nav-link-padding-y: 0.5rem;
 
-// /* Import Bootstrap's main SCSS file */
-// @import "/node_modules/bootstrap/scss/bootstrap";
+/* Import Bootstrap's main SCSS file */
+@import "../../../node_modules/bootstrap/scss/bootstrap";
diff --git a/webpack/webpack.prod.js b/webpack/webpack.prod.js
@@ -3,20 +3,26 @@ const { merge } = require('webpack-merge');
 const common = require('./webpack.common.js');
 const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
 const CompressionPlugin = require('compression-webpack-plugin');
+const TerserPlugin = require('terser-webpack-plugin');
+const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
+
 
 module.exports = merge(common, {
   mode: 'production',
   devtool: 'source-map',
   optimization: {
+    minimize: true,
     minimizer: [
       `...`,
       new CssMinimizerPlugin(),
+      new TerserPlugin(),
     ],
     splitChunks: {
       chunks: 'all', // This ensures Webpack splits code for dynamic imports
     },
   },
   plugins: [
+    new BundleAnalyzerPlugin(),
     new CompressionPlugin({
       test: /\.js$|\.css$|\.html$/,
       filename: '[path][base].gz',