Main content ah kal rawh Docs navigation ah kal rawh
Check
in English

Bootstrap leh Webpack te pawh a awm bawk

Webpack hmanga i project-a Bootstrap-a CSS leh JavaScript dah leh bundle dan tur official guide.

He page ah hian
A tawp thlenga skip duh em? He guide atana source code leh working demo hi twbs/examples repository atang hian download rawh . Live editing atan StackBlitz ah pawh entirnan i hawng thei bawk .

Rem khawm

Bootstrap hmangin Webpack project kan siam mek a, chuvangin kan tan tak tak hmain prerequisites leh up front step thenkhat a awm a ni. He guide hian Node.js install a ngai a, terminal hriat chian deuh a ngai bawk.

  1. Project folder siam la, npm setup rawh. Folder kan siam ang a, my-projectnpm chu -yargument hmangin kan initialize ang a, chu chuan interactive question zawng zawng min zawh loh nan.

    mkdir my-project && cd my-project
npm init -y

  2. Webpack chu install rawh. A dawtah chuan kan Webpack development dependencies te kan install a ngai a: webpackWebpack core atan, webpack-clichutiang chuan terminal atanga Webpack commands kan run webpack-dev-serverthei ang a, chutiang chuan local development server kan run thei ang. --save-devHeng dependency te hi hmasawnna hmanna atan chauh a ni a, thil siamchhuahna atan a ni lo tih signal nan kan hmang thin .

    npm i --save-dev webpack webpack-cli webpack-dev-server

  3. Bootstrap chu install rawh. Tunah chuan Bootstrap kan install thei tawh ang. Kan dropdowns, popovers, leh tooltips te hi an positioning atan a innghat a nih avangin Popper pawh kan install dawn a ni. Chutiang components hman i tum loh chuan hetah hian Popper hi i paih thei ang.

    npm i --save bootstrap @popperjs/core

  4. Dependency dang pawh install rawh. Webpack leh Bootstrap bakah hian Bootstrap-a CSS leh JS te chu Webpack nena uluk taka import leh bundle turin dependency tlemte kan mamawh belh bawk. Chung zingah chuan Sass, loader thenkhat, leh Autoprefixer te pawh a tel.

    npm i --save-dev autoprefixer css-loader postcss-loader sass sass-loader style-loader

Tunah chuan dependency mamawh zawng zawng kan install tawh avangin project file siam leh Bootstrap import hna kan thawk thei tawh ang.

Project kalpui dan tur

Folder kan siam tawh a, my-projectnpm kan initialize tawh bawk. Tunah chuan project structure round out turin kan srcleh folder te pawh kan siam dawn a ni. distA hnuaia mi hi run la my-project, a nih loh leh a hnuaia folder leh file structure tarlan ang hian manual in siam rawh.

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

I tih zawh chuan i project kimchang chu hetiang hian a awm tur a ni:

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

Hetih lai hian engkim a hmun dik takah a awm tawh a, mahse Webpack hian a thawk dawn lo a ni, a chhan chu kan webpack.config.jsla fill up loh vang a ni.

Webpack chu configure rawh

Depencies install tawh leh kan project folder kan coding tan theih nan kan inpeih tawh avangin Webpack chu kan configure thei tawh ang a, kan project chu local takin kan run thei tawh ang.

  1. webpack.config.jsI editor ah khan hawng rawh. Blank a nih avangin kan server kan start theih nan boilerplate config engemaw zat kan dah belh a ngai dawn a ni. He config part hian Webpack hnenah kan project JavaScript zawng tur te, compiled code chu khawiah nge ( dist) ah output tur tih te, development server awm dan tur ( disthot reload hmanga folder atanga lak chhuah) tur te a hrilh a.

    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
  }
}

  2. A dawtah chuan kan dist/index.html. Hei hi HTML page Webpack chuan browser-ah a load ang a, bundled CSS leh JS chu a hnua step hrang hrangah kan dah belh ang. Chutianga kan tih hma chuan render tur thil kan pek a ngai a, outputstep hmasa atanga JS pawh kan dah tel a ngai a ni.

    <!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>

    Hetah hian Bootstrap styling tlem kan dah tel a div class="container", <button>chutiang chuan Bootstrap-a CSS Webpack-in a load hun kan hmuh theih nan.

  3. Tunah chuan Webpack run tur chuan npm script kan mamawh a ni. A hnuaia script tarlan hi hawng la package.json, add startrawh (test script chu i nei tawh tur a ni). He script hi kan local Webpack dev server start nan kan hmang ang.

    {
  // ...
  "scripts": {
    "start": "webpack serve --mode development",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  // ...
}

  4. Tin, a tawp berah chuan Webpack kan tan thei bawk. my-projectI terminal-a folder atang chuan chu npm script i dah thar chu run rawh:

    npm start
    Webpack dev server a kal mek

He guide-a section dang leh a tawp berah hian Webpack loader te kan set up ang a, Bootstrap-a CSS leh JavaScript zawng zawng kan import vek ang.

Bootstrap chu import rawh

Webpack-a Bootstrap import tur chuan section hmasa bera kan install tawh loader te kha a ngai a ni. npm hmangin kan install tawh a, mahse tunah chuan Webpack hi hman theih turin configure a ngai ta a ni.

  1. Loader te chu webpack.config.js. Tunah chuan i configuration file chu a zo tawh a, a hnuaia snippet nen hian a inmil tur a ni. Heta part thar awm chhun chu modulesection hi a ni.

    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'
          }
        ]
      }
    ]
  }
}

    Heng loader zawng zawng hi kan mamawh chhan recap chu hetiang hi a ni. HTML page -a element style-loaderpakhatah CSS chu a inject a , leh hmannaah a pui a , Autoprefixer atan a mamawh a, Sass hman theihna min pe bawk.<style><head>css-loader@importurl()postcss-loadersass-loader

  2. Tunah chuan, Bootstrap a CSS hi import ila. src/scss/styles.scssBootstrap source Sass zawng zawng import turin a hnuaia mi hi add rawh .

    // Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";

    Kan stylesheet te pawh i duh chuan a hranin i import thei bawk. A chipchiar zawka hriat duh chuan kan Sass import docs hi chhiar la .

  3. A dawtah chuan CSS kan load a, Bootstrap a JavaScript kan import leh a. src/js/main.jsCSS load tur leh Bootstrap-a JS zawng zawng import tur chuan a hnuaia mi hi add rawh . Popper hi Bootstrap hmangin automatic in a import dawn a ni.

    // Import our custom CSS
import '../scss/styles.scss'

// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'

    Bundle size tihhniam theih nan JavaScript plugins te chu a tul angin pakhat zel i import thei bawk:

    import Alert from 'bootstrap/js/dist/alert'

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap'

    Bootstrap-a plugins hman dan tur hriat belh duh chuan kan JavaScript docs chhiar la .

  4. Tin, i zo tawh bawk! 🎉 Bootstrap source Sass leh JS fully load tawh chuan tunah chuan i local development server chu hetiang hian a awm tur a ni.

    Webpack dev server chu Bootstrap hmanga kal a ni

    Tunah chuan Bootstrap component i hman duh apiang i dah tan thei tawh ang. Bootstrap-a CSS leh JS i mamawh parts chauh import-a custom Sass dang dah belh dan tur leh i build optimize dan tur chu Webpack example project kimchang kha en ngei ang che.

Production tihchangtlun dan tur

I setup a zirin, production-a project kalpui nana tangkai tur security leh speed optimization dang thenkhat implement i duh mai thei. Heng optimizations te hi Webpack entirnan project ah hian hman a ni lo tih hre reng ang che , i kalpui dan tur chu nangmah kutah a awm a ni.

CSS lakchhuah dan

A style-loaderchunga kan configure tawh hian awlsam takin CSS chu bundle chhungah a chhuah a, chutiang chuan CSS file chu manual-a load in a dist/index.htmlngai lo. Hetiang approach hian Content Security Policy khauh tak nen a thawk thei lo mai thei a, mahse, bundle lian tak a nih avangin i application-ah bottleneck a ni thei bawk.

CSS chu , atanga direct a kan load theih nan then hran tur chuan Webpack plugin dist/index.htmlhmang la .mini-css-extract-loader

A hmasa berin plugin hi install la:

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

Tichuan Webpack configuration ah plugin chu instantiate la, hmang rawh:

--- 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
           },
           {

Run npm run buildleh hnuah file thar a awm ang a, chutah chuan dist/main.cssCSS import zawng zawng a awm ang src/js/main.js. Tunah hian i browser-ah i en dist/index.htmlchuan style chu a awm lo ang, tunah chuan dist/main.css. Generated CSS chu dist/index.htmlhetiang hian i dah tel thei ang:

--- 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>

SVG files te lakchhuah dan

data:Bootstrap-a CSS-ah hian inline URI hmanga SVG file reference tam tak a awm a . I project atan Content Security Policy i define a, chu data:chuan images tana URI a block a nih chuan heng SVG file te hi a load dawn lo. He harsatna hi Webpack-a asset modules feature hmangin inline SVG files te extract hmangin i paltlang thei ang.

Webpack chu hetiang hian inline SVG files extract turin configure rawh:

--- 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: [

Run npm run buildleh hnuah SVG files extracted into dist/iconsleh CSS atanga reference dik tak i hmu ang.

Hetah hian thil dik lo emaw, hun kal tawh emaw i hmu em? GitHub ah hian issue pakhat hawng la . Harsatna chinfelna kawngah tanpuina i mamawh em? GitHub ah hian zawng la, sawihona tan rawh .