Bootstrap & Webpack

Officialis dux est quam includere et fasciculum Bootstrap scriptor CSS et JavaScript in tuo consilio utens Webpack.

In hac pagina

Vis ad finem skip? Download source code and working demo for this guide from the twbs/exempla repositorium . Exemplum etiam aperire potes in StackBlitz pro edendo vivo.

Setup

Webpack consilium aedificamus cum Bootstrap de scabere, ideo necessariae sunt aliquae et ante gradibus ascendunt antequam vere incipias. Hic dux postulat ut Node.js instituatur et aliquam familiaritatem cum termino habeas.

Creare consilium folder et setup npm. Folderum my-projectcreabimus et npm initializemus cum -yargumento ad vitandum nos omnes quaestiones interactivas rogantes.
```
mkdir my-project && cd my-project
npm init -y
```
Install Webpack. Deinde necesse est ut clientelas evolutionis nostrae Webpack instituere: webpackpro nucleo Webpack, webpack-clisic Webpack mandata de termino currere possumus, et webpack-dev-serversic evolutionis localis server. Insignemus --save-devhas dependentias nonnisi ad usum evolutionis et non ad productionem.
```
npm i --save-dev webpack webpack-cli webpack-dev-server
```
Install Bootstrap. Nunc Bootstrap installare possumus. Etiam Popper instituemus cum guttae, popoverae et instrumenta nostra ab ea pro positione pendent. Si non cogitas utendo illis componentibus, hic praeterire potes Popper.
```
npm i --save bootstrap @popperjs/core
```
Install additional clientelas. Praeter Webpack et Bootstrap, paucas clientelas egimus ad recte importare et fasciculum Bootstrap scriptorum CSS et JS cum Webpack. Haec includit Sass, oneratus quidam et autopraefixor.
```
npm i --save-dev autoprefixer css-loader postcss-loader sass sass-loader style-loader
```

Nunc nos omnes necessarias clientelas inauguratus, efficere possumus ad operandum files creandos et invehendos Bootstrap.

Project structure

Iam nos my-projectfolder et initialized npm creavit. Nunc quoque nostrum srcet distfolder ut structuram exertam circumagemus. Sequentia e curre my-project, vel manually folder vel lima structuram creare infra ostendetur.

mkdir {dist,src,src/js,src/scss}
touch dist/index.html src/js/main.js src/scss/styles.scss webpack.config.js

Cum es factum, consilium tuum perfectum hoc debet videre:

my-project/
├── dist/
│   └── index.html
├── src/
│   ├── js/
│   │   └── main.js
│   └── scss/
│       └── styles.scss
├── package-lock.json
├── package.json
└── webpack.config.js

Hic omnia in loco suo sunt, sed Webpack opus non erit, quia nondum in nostro webpack.config.jsnondum implevimus.

Configurare Webpack

Cum clientelis inauguratus et proiectum folder nobis paratum est ut coding committitur, configurare iam Webpack et propositum nostrum localiter currere possumus.

Aperi webpack.config.jsin tuo editore. Cum suus blank est, necesse est nos aliquam boilerplate config addere ei ut servo nostro incipiamus. Haec pars config narrat Webpack ubi quaerere JavaScript nostrum propositum, ubi codicem ad output exaratum ( dist), et quomodo server progressionem agere debet (reload trahere a distfolder cum hot reload).
```
const path = require('path')

module.exports = {
  entry: './src/js/main.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist')
  },
  devServer: {
    static: path.resolve(__dirname, 'dist'),
    port: 8080,
    hot: true
  }
}
```

Deinde implemus dist/index.html. Haec est HTML pagina Webpack in navigatro ad utendum fasciculo CSS et JS utetur postea in gradibus addemus. Antequam id facere possumus, aliquid dare debemus ut outputJS ex antecedente gradu reddere et includere possit.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap w/ Webpack</title>
  </head>
  <body>
    <div class="container py-4 px-3 mx-auto">
      <h1>Hello, Bootstrap and Webpack!</h1>
      <button class="btn btn-primary">Primary button</button>
    </div>
    <script src="./main.js"></script>
  </body>
</html>

Inclusi sumus exiguam partem Bootstrap hic cum pro div class="container"et <button>ut videmus cum Bootstrap CSS oneratur a Webpack.

Nunc opus est scripto npm Webpack currere. Aperi package.jsonet scripturam infra ostensam adde start(iam habes scriptionem testam). Hoc scripto utemur ut nos incipiamus locales Webpack dev servo.
```
{
  // ...
  "scripts": {
    "start": "webpack serve --mode development",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  // ...
}
```
Postremo Webpack incipere possumus. A my-projectfolder in termino tuo, currite ut nuper additae scripturae npm;
```
npm start
```

In altera et ultima sectione huic duce, Webpack oneratores levabimus et omnes Bootstrap CSS et JavaScript importamus.

Import Bootstrap

Inferentes Bootstrap in Webpack postulat oneratores in sectione prima constituimus. Eos cum npm constituimus, nunc Webpack oportet configurari iis uti.

Onerantes in eriges webpack.config.js. Configuratio tua fasciculus nunc completus est et cum snippet infra congruit. Sola pars nova hic est modulesectio.

const path = require('path')

module.exports = {
  entry: './src/js/main.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist')
  },
  devServer: {
    static: path.resolve(__dirname, 'dist'),
    port: 8080,
    hot: true
  },
  module: {
    rules: [
      {
        test: /\.(scss)$/,
        use: [
          {
            loader: 'style-loader'
          },
          {
            loader: 'css-loader'
          },
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: () => [
                  require('autoprefixer')
                ]
              }
            }
          },
          {
            loader: 'sass-loader'
          }
        ]
      }
    ]
  }
}

Hic est refectio quare his omnibus oneratis indigemus. style-loaderCSS in <style>elementum in <head>paginae HTML infundit, css-loaderadiuvat utendo @importet url(), postcss-loaderad Autopraefixum requiritur, nobisque sass-loaderSass uti sinit.

Nunc Bootstrap scriptor CSS importet. Quae sequuntur adde src/scss/styles.scssut omnia importet fontem Sass Bootstrap.
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
Singillatim stylos nostros etiam importare potes si vis. Read our Sass import docs for details.
Next oneratis CSS et import Bootstrap scriptor JavaScript. Quae sequuntur adde ut src/js/main.jsCSS onerent et omnia s JS Bootstrap importent. Popper sponte per Bootstrap importari vult.
```
// Import our custom CSS
import '../scss/styles.scss'

// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
Plugins JavaScript etiam importare potes singulatim prout opus est ad magnitudinum fasciculorum custodiendam:
```
import Alert from 'bootstrap/js/dist/alert'

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap'
```
Read our JavaScript docs for more information on how to use Bootstrap's plugins.
Et factum es! 🎉 Cum fonte Bootstrap Sass et JS plene oneratis, loci tui evolutionis cultor hoc nunc spectare debet.

Nunc incipere potes addendo aliqua components Bootstrap uti velis. Vide ut inspicias exemplum propositi Webpack completum pro quo adiectis includere consuetudo Sass et optimize fabricam tuam imponendo solum partes Bootstrap's CSS et JS quae tibi necessaria sunt.

Productio optimizations

Prout in tuo setup, fortasse aliquas securitatem additos efficere vis et celeritas optimizations utilia ad currendum consilium in productione. Nota has optimizationes non applicari in exemplum Webpack ad propositum et ad te deducendi sunt.

Eiciendis CSS

Nos style-loadersupra figurati commode CSS in fasciculum emittit ut manually fasciculum CSS fasciculum oneret dist/index.htmlnon est necesse. Aditus hic non potest cum stricta Contenti Securitatis ratione laborare, tamen, et fieri potest in applicatione tua bottleneck propter fasciculum amplissimum.

CSS separare ut eam directe ex onerare possimus, plugin Webpack utere dist/index.html.mini-css-extract-loader

Primum, plugin install:

npm install --save-dev mini-css-extract-plugin

Tunc instantiate et plugin in Webpack configuratione utere:

--- a/webpack/webpack.config.js
+++ b/webpack/webpack.config.js
@@ -1,8 +1,10 @@
+const miniCssExtractPlugin = require('mini-css-extract-plugin')
 const path = require('path')
 
 module.exports = {
   mode: 'development',
   entry: './src/js/main.js',
+  plugins: [new miniCssExtractPlugin()],
   output: {
     filename: "main.js",
     path: path.resolve(__dirname, "dist"),
@@ -18,8 +20,8 @@ module.exports = {
         test: /\.(scss)$/,
         use: [
           {
-            // Adds CSS to the DOM by injecting a `<style>` tag
-            loader: 'style-loader'
+            // Extracts CSS for each JS file that includes CSS
+            loader: miniCssExtractPlugin.loader
           },
           {

Post iterum currentem npm run buildfasciculus novus erit dist/main.css, qui omnes CSS ab importato capiet src/js/main.js. Si dist/index.htmlin navigatro tuo nunc inspicias, stilus deerit, sicut nunc est dist/main.css. Generatum CSS sic includere potes dist/index.html:

--- a/webpack/dist/index.html
+++ b/webpack/dist/index.html
@@ -3,6 +3,7 @@
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="./main.css">
     <title>Bootstrap w/ Webpack</title>
   </head>
   <body>

Eiciendis fasciculis SVG

Bootstrap's CSS multiplex references ad SVG lima per inline data:URIs includit. Si consilium Securitatis Contentum definias pro incepto tuo quod data:URIs obstruat imagines, haec fasciculi SVG non aperient. Circumire potes hanc quaestionem extrahendo fasciculos inlineos SVG utendo pluma dignissim modulorum Webpack.

Configurare Webpack ad extrahendum inline SVG files sic:

--- a/webpack/webpack.config.js
+++ b/webpack/webpack.config.js
@@ -16,6 +16,14 @@ module.exports = {
   },
   module: {
     rules: [
+      {
+        mimetype: 'image/svg+xml',
+        scheme: 'data',
+        type: 'asset/resource',
+        generator: {
+          filename: 'icons/[hash].svg'
+        }
+      },
       {
         test: /\.(scss)$/,
         use: [

Post iterum currentem npm run build, tabellas SVG in extractas dist/iconset proprie inventas ex CSS invenies.

Vide quid mali an ex date hic? Quaeso aperi fluxum GitHub . Integer fermentum fermentum egestas? Quaere an disceptationem de GitHub incipias.