Tlolela ho litaba tsa mantlha Tlolela ho li-docs navigation
Check
in English

Bootstrap & Webpack

Tataiso ea semmuso ea ho kenyelletsa le ho bokella Bootstrap's CSS le JavaScript morerong oa hau u sebelisa Webpack.

Leqepheng lena
U batla ho tlola ho fihlela qetellong? Khoasolla khoutu ea mohloli le demo ea ho sebetsa bakeng sa tataiso ena ho tsoa polokelong ea twbs/mehlala . U ka boela ua bula mohlala ho StackBlitz bakeng sa liphetoho tse phelang.

Tlhophiso

Re ntse re theha morero oa Webpack ka Bootstrap ho tloha qalong, kahoo ho na le lintho tse hlokahalang le mehato e ka pele pele re ka qala. Tataiso ena e hloka hore u be le Node.js e kentsoeng le ho tloaelana le terminal.

  1. Theha foldara ea projeke ebe u seta npm. Re tla theha my-projectfoldara ebe re qala npm ka -ykhang ho e qoba ho re botsa lipotso tsohle tse amanang.

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

  2. Kenya Webpack. Ka mor'a moo re hloka ho kenya litšepiso tsa rona tsa nts'etsopele ea Webpack: webpackbakeng sa motheo oa Webpack, webpack-clikahoo re ka tsamaisa litaelo tsa Webpack ho tloha setsing, webpack-dev-serverkahoo re ka tsamaisa seva sa nts'etsopele ea lehae. Re sebelisa --save-devho bontša hore litšepiso tsena ke tsa ts'ebeliso ea nts'etsopele eseng bakeng sa tlhahiso.

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

  3. Kenya Bootstrap. Hona joale re ka kenya Bootstrap. Hape re tla kenya Popper kaha li-dropdown tsa rona, popover, le lisebelisoa tsa lisebelisoa li itšetlehile ka eona bakeng sa boemo ba tsona. Haeba u sa rera ho sebelisa likarolo tseo, u ka siea Popper mona.

    npm i --save bootstrap @popperjs/core

  4. Kenya lintho tse ling tse itšetlehileng ka tsona. Ntle le Webpack le Bootstrap, re hloka litšepiso tse ling tse 'maloa ho kenya le ho bokella CSS ea Bootstrap le JS ka Webpack. Tsena li kenyelletsa Sass, li-loaders tse ling, le Autoprefixer.

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

Kaha joale re na le litšepiso tsohle tse hlokahalang, re ka qala ho sebetsa ho theha lifaele tsa projeke le ho kenya Bootstrap.

Sebopeho sa morero

Re se re thehile my-projectfoldara mme re kentse npm. Hona joale re tla boela re thehe rona srcle distlifoldara ho tlatsa sebopeho sa projeke. Etsa tse latelang ho tloha ho my-project, kapa u iketsetse foldara le sebopeho sa faele se bontšitsoeng ka tlase.

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

Ha o qetile, projeke ea hau e felletseng e lokela ho shebahala tjena:

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

Mothating ona, tsohle li sebakeng se nepahetseng, empa Webpack e ke ke ea sebetsa hobane ha re so tlatse tsa rona webpack.config.js.

Lokisa Webpack

Ka litšepe tse kentsoeng 'me foldara ea rona ea projeke e se e loketse hore re qale ho kenya likhoutu, joale re ka hlophisa Webpack le ho tsamaisa projeke ea rona sebakeng sa heno.

  1. Bula webpack.config.jsho mohlophisi oa hau. Kaha ha e na letho, re tla hloka ho kenya li-boilerplate config ho eona hore re tsebe ho qala seva ea rona. Karolo ena ea config e re Webpack e ne e lokela ho batla JavaScript ea morero oa rona, moo e ka hlahisang khoutu e hlophisitsoeng ho ( dist), le hore na seva sa nts'etsopele se lokela ho itšoara joang (ho hula ho tloha distfoldareng ka ho kenya hape ho chesang).

    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. Ka mor'a moo re tlatsa rona dist/index.html. Ena ke leqephe la HTML Webpack e tla kenya sebatli ho sebelisa CSS e bokelletsoeng mme JS re tla e kenya ho eona ka mor'a mehato. Pele re ka etsa joalo, re tlameha ho e fa ho hong ho fana le ho kenyelletsa outputJS ho tloha mohatong o fetileng.

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

    Re kenyelletsa setaele sa Bootstrap mona le div class="container"le <button>hore re bone ha Bootstrap's CSS e laeloa ke Webpack.

  3. Joale re hloka script ea npm ho tsamaisa Webpack. Bula package.json'me u kenye startmongolo o bontšitsoeng ka tlase (o tlameha hore ebe o se o ntse o e-na le lengolo la tlhahlobo). Re tla sebelisa mongolo ona ho qala seva sa rona sa lehae sa Webpack.

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

  4. Mme qetellong, re ka qala Webpack. Ho tsoa my-projectfoldareng e ho terminal ea hau, tsamaisa mongolo o sa tsoa eketsoa oa npm:

    npm start
    Seva ea Webpack dev e sebetsa

Karolong e latelang le ea ho qetela ea tataiso ena, re tla theha li-loader tsa Webpack le ho kenya lisebelisoa tsohle tsa Bootstrap tsa CSS le JavaScript.

Kenya Bootstrap

Ho kenya Bootstrap ho Webpack ho hloka li-loaders tseo re li kentseng karolong ea pele. Re li kentse ka npm, empa joale Webpack e hloka ho hlophisoa ho e sebelisa.

  1. Beha li-loaders ka har'a webpack.config.js. Faele ea hau ea litlhophiso e se e felile 'me e lokela ho ts'oana le snippet e ka tlase. Karolo e ncha feela mona ke modulekarolo.

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

    Mona ke kakaretso ea hore na hobaneng re hloka li-loader tsena kaofela. style-loadere kenya CSS nthong <style>e <head>hlahang leqepheng la HTML, e css-loaderthusa ka ho sebelisa @importle url(), postcss-loaderea hlokahala bakeng sa Autoprefixer, mme sass-loadere re lumella ho sebelisa Sass.

  2. Joale, ha re ke re kenye CSS ea Bootstrap. Kenya tse latelang ho src/scss/styles.scsskenya mehloli eohle ea Sass ea Bootstrap.

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

    U ka boela ua kenya li-stylesheets tsa rona ka bonngoe haeba u batla. Bala litokomane tsa rona tsa Sass ho fumana lintlha.

  3. Ka mor'a moo re kenya CSS ebe re kenya JavaScript ea Bootstrap. Kenya tse latelang ho src/js/main.jskenya CSS le ho kenya tsohle tsa Bootstrap's JS. Popper e tla romelloa kantle ho naha ka bo eona ka Bootstrap.

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

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

    U ka kenya li-plugins tsa JavaScript ka bonngoe kamoo ho hlokahalang ho boloka boholo ba bongata bo le tlase:

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

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

    Bala litokomane tsa rona tsa JavaScript bakeng sa tlhaiso-leseling e batsi mabapi le mokhoa oa ho sebelisa li-plugins tsa Bootstrap.

  4. Mme o qetile! 🎉 Kaha mohloli oa Bootstrap oa Sass le JS o tletse ka botlalo, seva sa hau sa nts'etsopele ea lehae se lokela ho shebahala tjena.

    Seva ea Webpack dev e sebetsang le Bootstrap

    Joale o ka qala ho kenyelletsa lisebelisoa life kapa life tsa Bootstrap tseo u batlang ho li sebelisa. Etsa bonnete ba hore u sheba projeke e felletseng ea mohlala oa Webpack mabapi le mokhoa oa ho kenyelletsa tloaelo ea Sass le ho ntlafatsa moaho oa hau ka ho kenya feela likarolo tsa Bootstrap's CSS le JS tseo u li hlokang.

Ntlafatso ea tlhahiso

Ho ipapisitse le seta sa hau, o kanna oa batla ho kenya ts'ebetsong ts'ireletso e 'ngoe le ts'ebetso ea lebelo e sebetsang bakeng sa ho tsamaisa projeke tlhahisong. Hlokomela hore lintlafatso tsena ha li sebelisoe morerong oa mohlala oa Webpack mme ho uena ho o kenya tšebetsong.

Ho ntša CSS

Seo style-loaderre se lokiselitseng ka holimo se hlahisa CSS ka har'a bongata e le hore ho kenya faele ea CSS ka letsoho ho dist/index.htmlsa hlokahale. Mokhoa ona o kanna oa se sebetse ka Leano le tiileng la Ts'ireletso ea Content, leha ho le joalo, 'me e kanna ea ba tšitiso ts'ebelisong ea hau ka lebaka la boholo ba bongata.

Ho arola CSS e le hore re ka e kenya ka kotloloho ho tsoa ho dist/index.html, sebelisa mini-css-extract-loaderplugin ea Webpack.

Ntlha ea pele, kenya plugin:

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

Ebe u kenya letsoho 'me u sebelise plugin ho tlhophiso ea Webpack:

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

Kamora ho sebetsa npm run buildhape, ho tla ba le faele e ncha dist/main.css, e tla ba le CSS eohle e tsoang kantle ho naha ke src/js/main.js. Haeba u sheba dist/index.htmlsebatli sa hau hona joale, setaele se tla be se le sieo, joalo ka ha se se se le teng dist/main.css. U ka kenyelletsa CSS e hlahisitsoeng ka dist/index.htmltsela ena:

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

Ho ntša lifaele tsa SVG

CSS ea Bootstrap e kenyelletsa litšupiso tse ngata tsa lifaele tsa SVG ka li data:-URI tse ka hare. Haeba u hlalosa Leano la Ts'ireletso ea Likahare bakeng sa projeke ea hau e thibelang data:li-URI bakeng sa litšoantšo, lifaele tsena tsa SVG li ke ke tsa kenya. U ka rarolla bothata bona ka ho ntša lifaele tsa SVG tse inline u sebelisa tšobotsi ea li-module tsa thepa ea Webpack.

Lokisa Webpack ho ntša lifaele tsa SVG tse ka hare ka tsela e kang ena:

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

Kamora ho sebetsa npm run buildhape, u tla fumana lifaele tsa SVG li ntšitsoe ho tsona dist/icons'me li hlalositsoe hantle ho tsoa ho CSS.

U bona ho hong ho phoso kapa e siiloe ke nako mona? Ka kopo , bula bothata ho GitHub . U hloka thuso ea ho rarolla mathata? Batla kapa qala puisano ho GitHub.