From 432df654de92cc66cafe6c756c5f51ae748782c1 Mon Sep 17 00:00:00 2001 From: geo Date: Tue, 17 May 2022 22:45:52 +0300 Subject: [PATCH] Add webpack with dynamic loading --- webpack-2/README.md | 16 ++++ webpack-2/index.html | 87 +++++++++++++++++++++ webpack-2/package.json | 39 +++++++++ webpack-2/src/js/bootstrap.js | 15 ++++ webpack-2/src/js/main.js | 13 +++ webpack-2/src/scss/_icon-list.scss | 20 +++++ webpack-2/src/scss/_variables-override.scss | 11 +++ webpack-2/src/scss/styles.scss | 39 +++++++++ webpack-2/webpack.config.js | 78 ++++++++++++++++++ 9 files changed, 318 insertions(+) create mode 100644 webpack-2/README.md create mode 100644 webpack-2/index.html create mode 100644 webpack-2/package.json create mode 100644 webpack-2/src/js/bootstrap.js create mode 100644 webpack-2/src/js/main.js create mode 100644 webpack-2/src/scss/_icon-list.scss create mode 100644 webpack-2/src/scss/_variables-override.scss create mode 100644 webpack-2/src/scss/styles.scss create mode 100644 webpack-2/webpack.config.js diff --git a/webpack-2/README.md b/webpack-2/README.md new file mode 100644 index 00000000..104f04fc --- /dev/null +++ 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 new file mode 100644 index 00000000..208484b4 --- /dev/null +++ b/webpack-2/index.html @@ -0,0 +1,87 @@ + + + + + + Bootstrap Webpack 2 + + + +
+
+

+ + Bootstrap + Webpack + +

+ View on + GitHub +
+ +

Build Bootstrap with Webpack

+
+

You've successfully loaded the Bootstrap + Webpack example! It's loaded up with Bootstrap 5 and uses Webpack to compile and bundle our Sass and + JavaScript. It also includes Autoprefixer.

+

If this button appears blue and the link appears purple, you've done it!

+
+ + + Example popover + + + +
+
+
Offcanvas
+ +
+
+
+ Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, + lists, etc. +
+
+ + +
+
+
+ +
+ +

Guides

+

Read more detailed instructions and documentation on using or contributing to Bootstrap.

+ + +
+ +

Created and open sourced by the Bootstrap team. Licensed MIT.

+
+ + + + + diff --git a/webpack-2/package.json b/webpack-2/package.json new file mode 100644 index 00000000..8fa63635 --- /dev/null +++ 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 new file mode 100644 index 00000000..16490b74 --- /dev/null +++ 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) + }) +}); \ No newline at end of file diff --git a/webpack-2/src/js/main.js b/webpack-2/src/js/main.js new file mode 100644 index 00000000..d07a24ae --- /dev/null +++ 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 new file mode 100644 index 00000000..6ef3c311 --- /dev/null +++ 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 new file mode 100644 index 00000000..2c9fd310 --- /dev/null +++ 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 new file mode 100644 index 00000000..4a6f9748 --- /dev/null +++ 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 new file mode 100644 index 00000000..a957bb76 --- /dev/null +++ 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'], + }), + ], +}