Add webpack with dynamic loading

twbs · Jul 16, 2022 · 432df65 · 432df65
1 parent dc64ea0
commit 432df65
Show file tree

Hide file tree

Showing 9 changed files with 318 additions and 0 deletions.
diff --git a/webpack-2/README.md b/webpack-2/README.md
@@ -0,0 +1,16 @@
+# Bootstrap w/ Webpack
+
+Include [Bootstrap](https://getbootstrap.com)'s source Sass and individual JavaScript plugins with [Webpack](https://webpack.js.org).
+
+## Edit in browser
+
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/twbs/examples/tree/main/webpack-2?file=index.html)
+
+## How to use
+
+```sh
+git clone https://github.com/twbs/examples.git
+cd examples/webpack/
+npm install
+npm start
+```
diff --git a/webpack-2/index.html b/webpack-2/index.html
@@ -0,0 +1,87 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <title>Bootstrap Webpack 2</title>
+        <link rel="stylesheet" href="dist/css/main.css"/>
+    </head>
+    <body>
+        <div class="container py-4 px-3 mx-auto">
+            <header class="d-flex justify-content-between align-items-md-center pb-3 mb-5 border-bottom">
+                <h1 class="h4">
+                    <a href="/" class="d-flex align-items-center text-dark text-decoration-none">
+                        <img class="d-inline-block me-2" width="40" height="32"
+                             src="https://raw.githubusercontent.com/twbs/bootstrap/main/site/static/docs/5.2/assets/brand/bootstrap-logo-black.svg"
+                             alt="Bootstrap">
+                        <span>Webpack</span>
+                    </a>
+                </h1>
+                <a href="https://github.com/twbs/examples/tree/main/webpack-2/" target="_blank" rel="noopener">View on
+                    GitHub</a>
+            </header>
+
+            <h1>Build Bootstrap with Webpack</h1>
+            <div class="col-lg-8 px-0">
+                <p class="fs-4">You've successfully loaded the Bootstrap + Webpack example! It's loaded up with <a
+                        href="https://getbootstrap.com/">Bootstrap 5</a> and uses Webpack to compile and bundle our Sass and
+                    JavaScript. It also includes Autoprefixer.</p>
+                <p>If this button appears blue and the link appears purple, you've done it!</p>
+            </div>
+
+            <button type="button" class="btn btn-primary me-3" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample">
+                Toggle offcanvas
+            </button>
+            <a id="popoverButton" class="text-success" href="#" role="button" data-bs-toggle="popover" title="Custom popover"
+               data-bs-content="This is a Bootstrap popover.">Example popover</a>
+
+            <div class="alert alert-success alert-dismissible fade mt-5" role="alert">
+                <strong>You just,</strong> dynamically imported alert.js.
+                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+            </div>
+
+            <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
+                <div class="offcanvas-header">
+                    <h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas</h5>
+                    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
+                </div>
+                <div class="offcanvas-body">
+                    <div>
+                        Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images,
+                        lists, etc.
+                    </div>
+                    <div class="dropdown mt-3">
+                        <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton"
+                                data-bs-toggle="dropdown">
+                            Dropdown button
+                        </button>
+                        <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
+                            <li><a class="dropdown-item" href="#">Action</a></li>
+                            <li><a class="dropdown-item" href="#">Another action</a></li>
+                            <li><a class="dropdown-item" href="#">Something else here</a></li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+
+            <hr class="col-1 my-5 mx-0">
+
+            <h2>Guides</h2>
+            <p>Read more detailed instructions and documentation on using or contributing to Bootstrap.</p>
+            <ul class="icon-list">
+                <li><a href="https://getbootstrap.com/docs/5.1/getting-started/introduction/">Bootstrap quick start guide</a>
+                </li>
+                <li><a href="https://getbootstrap.com/docs/5.1/getting-started/webpack/">Bootstrap Webpack guide</a></li>
+                <li><a href="https://getbootstrap.com/docs/5.1/getting-started/parcel/">Bootstrap Parcel guide</a></li>
+                <li><a href="https://getbootstrap.com/docs/5.1/getting-started/build-tools/">Contributing to Bootstrap</a></li>
+            </ul>
+
+            <hr class="mt-5 mb-4">
+
+            <p class="text-muted">Created and open sourced by the Bootstrap team. Licensed MIT.</p>
+        </div>
+
+
+        <script src="dist/js/main.js"></script>
+    </body>
+</html>
diff --git a/webpack-2/package.json b/webpack-2/package.json
@@ -0,0 +1,39 @@
+{
+  "name": "webpack-2",
+  "description": "Include Bootstrap's source Sass and individual JavaScript plugins with Webpack.",
+  "version": "0.0.0",
+  "private": true,
+  "stackblitz": {
+    "startCommand": "npm start"
+  },
+  "scripts": {
+    "start": "NODE_ENV=development webpack serve",
+    "watch": "NODE_ENV=development webpack -w",
+    "dev": "NODE_ENV=development webpack",
+    "prod": "NODE_ENV=production webpack --progress"
+  },
+  "dependencies": {
+    "@popperjs/core": "^2.11.5",
+    "bootstrap": "5.2.0-beta1"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.17.9",
+    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+    "@babel/preset-env": "^7.16.11",
+    "autoprefixer": "^10.4.7",
+    "babel-loader": "^8.2.3",
+    "babel-plugin-dynamic-import-webpack": "^1.1.0",
+    "clean-webpack-plugin": "^4.0.0",
+    "css-loader": "^6.7.1",
+    "export-loader": "^1.0.52",
+    "mini-css-extract-plugin": "^2.6.0",
+    "path": "^0.12.7",
+    "postcss-loader": "^6.2.1",
+    "sass": "^1.51.0",
+    "sass-loader": "^12.6.0",
+    "style-loader": "^3.3.1",
+    "webpack": "^5.72.1",
+    "webpack-cli": "^4.9.2",
+    "webpack-dev-server": "^4.9.0"
+  }
+}
diff --git a/webpack-2/src/js/bootstrap.js b/webpack-2/src/js/bootstrap.js
@@ -0,0 +1,15 @@
+// window.Popper = import('@popperjs/core').then(src => src.default);
+
+
+import('bootstrap').then(bs => {
+// Enable tooltips
+    document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(tooltipTriggerEl => {
+        new bs.Tooltip(tooltipTriggerEl)
+    })
+
+
+// Enable popovers
+    document.querySelectorAll('[data-bs-toggle="popover"]').forEach(popoverTriggerEl => {
+        bs.Popover.getOrCreateInstance(popoverTriggerEl)
+    })
+});
diff --git a/webpack-2/src/js/main.js b/webpack-2/src/js/main.js
@@ -0,0 +1,13 @@
+// Import our custom CSS
+import '../scss/styles.scss';
+
+// bring in Bootstrap
+import('./bootstrap')
+
+
+import('bootstrap').then(bs => {
+    document.querySelector('.alert').classList.add('show')
+    setTimeout(() => {
+        bs.Alert.getOrCreateInstance('.alert').close()
+    },3000)
+});
diff --git a/webpack-2/src/scss/_icon-list.scss b/webpack-2/src/scss/_icon-list.scss
@@ -0,0 +1,20 @@
+// Example of a custom component
+
+.icon-list {
+  padding-left: 0;
+  list-style: none;
+}
+.icon-list li {
+  display: flex;
+  align-items: flex-start;
+  margin-bottom: .25rem;
+}
+.icon-list li::before {
+  display: block;
+  flex-shrink: 0;
+  width: 1.5em;
+  height: 1.5em;
+  margin-right: .5rem;
+  content: "";
+  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23212529' viewBox='0 0 16 16'%3E%3Cpath d='M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0zM4.5 7.5a.5.5 0 0 0 0 1h5.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3a.5.5 0 0 0 0-.708l-3-3a.5.5 0 1 0-.708.708L10.293 7.5H4.5z'/%3E%3C/svg%3E") no-repeat center center / 100% auto;
+}
diff --git a/webpack-2/src/scss/_variables-override.scss b/webpack-2/src/scss/_variables-override.scss
@@ -0,0 +1,11 @@
+
+$enable-gradients: true;
+$enable-shadows: true;
+
+$offcanvas-box-shadow: 0 1rem 3rem rgba(0, 0, 0, .175);
+
+// Customize some defaults
+$body-color: #333;
+$body-bg: #fff;
+$border-radius: .4rem;
+$primary: #7952b3;
diff --git a/webpack-2/src/scss/styles.scss b/webpack-2/src/scss/styles.scss
@@ -0,0 +1,39 @@
+// Override Bootstrap's Sass default variables
+//
+// Nearly all variables in Bootstrap are written with the `!default` flag.
+// This allows you to override the default values of those variables before
+// you import Bootstrap's source Sass files.
+//
+// Overriding the default variable values is the best way to customize your
+// CSS without writing _new_ styles. For example, change you can either change
+// `$body-color` or write more CSS that override's Bootstrap's CSS like so:
+// `body { color: red; }`.
+
+
+//
+// Bring in Bootstrap
+//
+
+// Option 1
+//
+// Import all of Bootstrap's CSS
+
+// @import "~bootstrap/scss/bootstrap";
+
+// Option 2
+//
+
+
+// Bootstrap
+@import '~bootstrap/scss/functions';
+@import '~bootstrap/scss/mixins';
+@import 'variables-override';
+@import '~bootstrap/scss/bootstrap';
+
+
+
+@import "icon-list";
+
+body {
+  padding: 1.5rem;
+}
diff --git a/webpack-2/webpack.config.js b/webpack-2/webpack.config.js
@@ -0,0 +1,78 @@
+const path = require("path");
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
+const { CleanWebpackPlugin } = require('clean-webpack-plugin');
+
+
+module.exports = {
+    mode: process.env.NODE_ENV,
+    entry: './src/js/main.js',
+    output: {
+        filename: "js/[name].js",
+        path: path.resolve(__dirname, "./dist"),
+        // publicPath: '/dist/'
+    },
+    devServer: {
+        static: path.resolve(__dirname),
+        port: 8080,
+        hot: true
+    },
+
+    // Define loaders
+    module: {
+        rules: [
+            // Use babel for JS files
+            {
+                test: /\.js$/,
+                exclude: /(node_modules)/,
+                use: {
+                    loader: "babel-loader",
+                    options: {
+                        // plugins: ["dynamic-import-webpack","@babel/plugin-syntax-dynamic-import"],
+                        presets: [
+                            "@babel/preset-env",
+                        ]
+                    }
+                }
+            },
+            // CSS, PostCSS, and Sass
+            {
+                test: /\.(scss|css)$/,
+                use: [
+                    MiniCssExtractPlugin.loader,
+                    {
+                        loader: "css-loader",
+                        options: {
+                            importLoaders: 2,
+                            sourceMap: true,
+                            url: false,
+                        }
+                    },
+                    {
+                        loader: 'postcss-loader',
+                        options: {
+                            postcssOptions: {
+                                plugins: [
+                                    'autoprefixer',
+                                ]
+                            }
+                        }
+                    },
+                    'sass-loader'
+                ],
+            },
+        ],
+    },
+    // Define used plugins
+    plugins: [
+        // Extracts CSS into separate files
+        new MiniCssExtractPlugin({
+            filename: "css/[name].css",
+            chunkFilename: "[id].css"
+        }),
+        new CleanWebpackPlugin({
+            verbose: true,
+            dry: true,
+            cleanOnceBeforeBuildPatterns: ['**/*', '!stats.json'],
+        }),
+    ],
+}