Hla mus rau cov ntsiab lus tseem ceeb Hla mus rau docs navigation
Check
in English

Bootstrap & Webpack

Cov lus qhia tseem ceeb rau kev suav nrog thiab ntim Bootstrap's CSS thiab JavaScript hauv koj qhov project siv Webpack.

Ntawm nplooj ntawv no
Xav hla mus rau qhov kawg? Download the source code and working demo for this guide from the twbs/example repository . Koj tuaj yeem qhib qhov piv txwv hauv StackBlitz rau kev hloov kho nyob.

Teeb tsa

Peb tab tom tsim Webpack project nrog Bootstrap los ntawm kos, yog li muaj qee qhov yuav tsum tau ua ua ntej thiab ua ntej peb tuaj yeem pib tiag tiag. Cov lus qhia no xav kom koj muaj Node.js ntsia thiab qee qhov kev paub nrog lub davhlau ya nyob twg.

  1. Tsim ib qhov project folder thiab teeb npm. Peb mam li tsim cov my-projectntawv tais ceev tseg thiab pib npm nrog cov -ylus sib cav kom tsis txhob nug peb tag nrho cov lus nug sib tham.

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

  2. Nruab Webpack. Tom ntej no peb yuav tsum tau nruab peb Webpack kev txhim kho kev vam khom: webpackrau lub hauv paus ntawm Webpack, webpack-cliyog li peb tuaj yeem khiav Webpack cov lus txib los ntawm lub davhlau ya nyob twg, thiab webpack-dev-serveryog li peb tuaj yeem khiav lub chaw tsim khoom hauv zos. Peb siv --save-devlos qhia tias cov kev vam khom no tsuas yog siv rau kev txhim kho thiab tsis yog rau kev tsim khoom.

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

  3. Nruab Bootstrap. Tam sim no peb tuaj yeem nruab Bootstrap. Peb tseem yuav nruab Popper txij li peb qhov kev poob qis, popovers, thiab cov lus qhia nyob ntawm nws rau lawv qhov chaw. Yog tias koj tsis npaj siv cov khoom no, koj tuaj yeem tshem tawm Popper ntawm no.

    npm i --save bootstrap @popperjs/core

  4. Txhim kho qhov kev vam khom ntxiv. Ntxiv nrog rau Webpack thiab Bootstrap, peb xav tau ob peb qhov kev vam khom ntxiv kom tsim nyog thiab ntim Bootstrap's CSS thiab JS nrog Webpack. Cov no suav nrog Sass, qee qhov loaders, thiab Autoprefixer.

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

Tam sim no peb muaj tag nrho cov kev vam khom tsim nyog tau teeb tsa, peb tuaj yeem ua haujlwm tsim cov ntaub ntawv project thiab import Bootstrap.

Qhov project qauv

Peb twb tau tsim cov my-projectntawv tais ceev tseg thiab pib npm. Tam sim no peb tseem yuav tsim peb srcthiab distcov folders los sib sau ua ke ntawm qhov project. Khiav cov hauv qab no los ntawm my-project, lossis manually tsim cov ntawv tais ceev tseg thiab cov qauv ntaub ntawv qhia hauv qab no.

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

Thaum koj ua tiav, koj qhov project tiav yuav tsum zoo li no:

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

Lub sijhawm no, txhua yam nyob rau hauv qhov chaw, tab sis Webpack yuav tsis ua haujlwm vim peb tseem tsis tau sau rau hauv peb webpack.config.js.

Configure Webpack

Nrog kev vam khom thiab peb qhov project folder npaj rau peb pib coding, tam sim no peb tuaj yeem teeb tsa Webpack thiab khiav peb qhov project hauv zos.

  1. Qhib webpack.config.jskoj tus editor. Txij li nws tsis muaj dab tsi, peb yuav tsum tau ntxiv qee qhov boilerplate config rau nws kom peb tuaj yeem pib peb lub server. Qhov no ntawm lub config qhia Webpack yuav tsum tau saib rau peb qhov project JavaScript, qhov twg yuav tso tawm cov cai muab tso ua ke rau ( dist), thiab yuav ua li cas cov neeg rau zaub mov kev loj hlob yuav tsum coj (rub los ntawm lub distnplaub tshev nrog kub 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
  }
}

  2. Tom ntej no peb sau peb dist/index.html. Qhov no yog nplooj ntawv HTML Webpack yuav thauj khoom hauv qhov browser los siv cov ntaub ntawv CSS thiab JS peb mam li ntxiv rau hauv cov kauj ruam tom ntej. Ua ntej peb tuaj yeem ua tau, peb yuav tsum muab nws ib yam dab tsi los ua thiab suav nrog outputJS los ntawm cov kauj ruam dhau los.

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

    Peb tab tom suav nrog me ntsis ntawm Bootstrap styling ntawm no nrog rau div class="container"thiab <button>kom peb pom thaum Bootstrap's CSS yog loaded los ntawm Webpack.

  3. Tam sim no peb xav tau npm tsab ntawv los khiav Webpack. Qhib package.jsonthiab ntxiv cov startntawv qhia hauv qab no (koj yuav tsum muaj cov ntawv xeem lawm). Peb yuav siv tsab ntawv no los pib peb lub zos Webpack dev server.

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

  4. Thiab thaum kawg, peb tuaj yeem pib Webpack. Los ntawm cov my-projectntawv tais ceev tseg hauv koj lub davhlau ya nyob twg, khiav qhov tshiab npm tsab ntawv:

    npm start
    Webpack dev server khiav

Hauv seem tom ntej thiab zaum kawg rau phau ntawv qhia no, peb yuav teeb tsa Webpack loaders thiab import tag nrho Bootstrap's CSS thiab JavaScript.

Ntshuam Bootstrap

Importing Bootstrap rau hauv Webpack xav tau cov loaders uas peb tau nruab rau hauv thawj ntu. Peb tau teeb tsa lawv nrog npm, tab sis tam sim no Webpack yuav tsum tau teeb tsa kom siv lawv.

  1. Teeb cov loaders hauv webpack.config.js. Koj cov ntaub ntawv teeb tsa tam sim no ua tiav thiab yuav tsum phim cov ntsiab lus hauv qab no. Ib qho tshiab ntawm no yog modulentu.

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

    Ntawm no yog ib daim ntawv qhia txog vim li cas peb xav tau tag nrho cov loaders no. style-loadertxhaj cov CSS rau hauv ib lub <style>caij hauv <head>nplooj ntawv HTML, css-loaderpab nrog kev siv @importthiab url(), postcss-loaderyog xav tau rau Autoprefixer, thiab sass-loadertso cai rau peb siv Sass.

  2. Tam sim no, cia peb import Bootstrap's CSS. Ntxiv cov hauv qab no src/scss/styles.scssrau import tag nrho cov Bootstrap qhov chaw Sass.

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

    Koj tseem tuaj yeem import peb cov ntawv style ib tus zuj zus yog tias koj xav tau. Nyeem peb Sass import docs kom paub meej.

  3. Tom ntej no peb thauj CSS thiab import Bootstrap's JavaScript. Ntxiv cov hauv qab no src/js/main.jsmus thauj cov CSS thiab import tag nrho cov Bootstrap's JS. Popper yuav raug import los ntawm Bootstrap.

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

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

    Koj tseem tuaj yeem import JavaScript plugins ib tus zuj zus raws li qhov xav tau los khaws cov pob ntau thiab tsawg:

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

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

    Nyeem peb cov ntaub ntawv JavaScript kom paub ntau ntxiv txog kev siv Bootstrap's plugins.

  4. Thiab koj ua tiav! 🎉 Nrog Bootstrap qhov chaw Sass thiab JS tag nrho loaded, koj lub zos kev loj hlob server yuav tsum tam sim no zoo li no.

    Webpack dev server khiav nrog Bootstrap

    Tam sim no koj tuaj yeem pib ntxiv ib qho Bootstrap Cheebtsam uas koj xav siv. Nco ntsoov xyuas qhov ua tiav Webpack piv txwv qhov project yuav ua li cas suav nrog kev cai Sass ntxiv thiab txhim kho koj qhov tsim los ntawm kev xa cov khoom ntawm Bootstrap's CSS thiab JS uas koj xav tau.

Kev tsim kho kom zoo

Nyob ntawm koj qhov kev teeb tsa, koj tuaj yeem xav siv qee qhov kev ruaj ntseg ntxiv thiab kev ua kom zoo nrawm rau kev khiav haujlwm hauv kev tsim khoom. Nco ntsoov tias cov kev ua kom zoo dua no tsis siv rau ntawm Webpack piv txwv qhov project thiab yog nyob ntawm koj los siv.

Extracting CSS

Qhov style-loaderpeb teeb tsa saum toj no yooj yim tso tawm CSS rau hauv cov pob kom manually thauj cov ntaub ntawv CSS hauv dist/index.htmltsis tsim nyog. Txoj hauv kev no yuav tsis ua haujlwm nrog Txoj Cai Tswjfwm Ntiag Tug nruj, txawm li cas los xij, thiab nws yuav dhau los ua qhov tsis muaj zog hauv koj daim ntawv thov vim muaj cov pob loj loj.

Txhawm rau cais CSS kom peb tuaj yeem thauj khoom ncaj qha los ntawm dist/index.html, siv mini-css-extract-loaderWebpack plugin.

Ua ntej, nruab lub plugin:

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

Tom qab ntawd instantiate thiab siv lub plugin hauv Webpack configuration:

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

Tom qab khiav npm run builddua, yuav muaj cov ntaub ntawv tshiab dist/main.css, uas yuav muaj tag nrho cov CSS tuaj ntawm src/js/main.js. Yog tias koj saib dist/index.htmlhauv koj tus browser tam sim no, cov style yuav ploj mus, zoo li tam sim no nyob rau hauv dist/main.css. Koj tuaj yeem suav nrog CSS generated hauv dist/index.htmlzoo li no:

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

Extracting SVG cov ntaub ntawv

Bootstrap's CSS suav nrog ntau qhov kev xa mus rau SVG cov ntaub ntawv ntawm inline data:URIs. Yog tias koj txhais cov ntsiab lus kev nyab xeeb rau koj qhov project uas thaiv data:URIs rau cov duab, ces cov ntaub ntawv SVG no yuav tsis thauj khoom. Koj tuaj yeem tau txais ib puag ncig qhov teeb meem no los ntawm kev rho tawm cov ntaub ntawv SVG inline siv Webpack cov cuab yeej cuab tam modules feature.

Configure Webpack kom rho tawm inline SVG cov ntaub ntawv zoo li no:

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

Tom qab khiav npm run builddua, koj yuav pom SVG cov ntaub ntawv muab rho tawm rau hauv dist/iconsthiab siv tau los ntawm CSS.

Pom ib yam dab tsi tsis ncaj ncees lawm los yog tsis muaj hnub no? Thov qhib qhov teeb meem ntawm GitHub . Xav tau kev pab daws teeb meem? Nrhiav lossis pib sib tham ntawm GitHub.