Rach gu prìomh shusbaint Air adhart gu seòladh docs
Check
in English

Bootstrap agus pasgan lìn

An iùl oifigeil air mar as urrainn dhut CSS agus JavaScript Bootstrap a thoirt a-steach agus a phasgadh sa phròiseact agad a’ cleachdadh Webpack.

Air an duilleig seo
A bheil thu airson leum chun deireadh? Luchdaich sìos an còd stòr agus an demo obrach airson an iùl seo bhon stòr twbs / samples . Faodaidh tu cuideachd an eisimpleir fhosgladh ann an StackBlitz airson deasachadh beò.

Suidhich

Tha sinn a’ togail pròiseact Webpack le Bootstrap bhon fhìor thoiseach, agus mar sin tha cuid de ro-ghoireasan ann agus ceumannan air thoiseach mus urrainn dhuinn tòiseachadh dha-rìribh. Tha an iùl seo ag iarraidh gum bi Node.js agad air a chuir a-steach agus beagan eòlais air a’ cheann-uidhe.

  1. Cruthaich pasgan pròiseict agus cuir air dòigh npm. Cruthaichidh sinn am my-projectpasgan agus tòisichidh sinn npm leis an -yargamaid gus nach cuir sinn na ceistean eadar-ghnìomhach oirnn uile.

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

  2. Stàlaich Webpack. An ath rud feumaidh sinn ar eisimeileachd leasachaidh Webpack a chuir a-steach: webpackairson cridhe Webpack, webpack-cligus an urrainn dhuinn òrdughan Webpack a ruith bhon cheann-uidhe, agus webpack-dev-servergus an urrainn dhuinn frithealaiche leasachaidh ionadail a ruith. Bidh sinn a’ cleachdadh --save-deva bhith a’ comharrachadh nach eil na h-eisimeileachd sin ach airson cleachdadh leasachaidh agus chan ann airson cinneasachadh.

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

  3. Stàlaich Bootstrap. A-nis is urrainn dhuinn Bootstrap a stàladh. Stàlaichidh sinn Popper cuideachd leis gu bheil na dropdowns, popovers, agus molaidhean innealan againn an urra ris airson an suidheachadh. Mura h-eil thu an dùil na co-phàirtean sin a chleachdadh, faodaidh tu Popper fhàgail an seo.

    npm i --save bootstrap @popperjs/core

  4. Stàlaich eisimeileachd a bharrachd. A bharrachd air Webpack agus Bootstrap, feumaidh sinn beagan a bharrachd eisimeileachd gus CSS agus JS Bootstrap a thoirt a-steach agus a phasgadh le Webpack. Nam measg tha Sass, cuid de luchdan, agus Autoprefixer.

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

A-nis gu bheil a h-uile eisimeileachd riatanach againn air a chuir a-steach, is urrainn dhuinn faighinn gu obair a’ cruthachadh faidhlichean a ’phròiseict agus a’ toirt a-steach Bootstrap.

Structar pròiseict

Tha sinn air am my-projectpasgan a chruthachadh mu thràth agus air tòiseachadh npm. A-nis cruthaichidh sinn na pasganan againn cuideachd gus srcstructar dista’ phròiseict a thoirt gu crìch. Ruith na leanas bho my-project, no cruthaich le làimh am pasgan agus an structar faidhle a chithear gu h-ìosal.

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

Nuair a bhios tu deiseil, bu chòir don phròiseact iomlan agad coimhead mar seo:

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

Aig an ìre seo, tha a h-uile dad san àite cheart, ach chan obraich Webpack leis nach eil sinn air ar lìonadh a-steach webpack.config.jsfhathast.

Dèan rèiteachadh air Webpack

Le eisimeileachd air a chuir a-steach agus am pasgan pròiseict againn deiseil airson tòiseachadh air còdadh, is urrainn dhuinn a-nis Webpack a rèiteachadh agus ar pròiseact a ruith gu h-ionadail.

  1. Fosgail webpack.config.jsanns an deasaiche agad. Leis gu bheil e bàn, feumaidh sinn beagan config boilerplate a chur ris gus an urrainn dhuinn ar frithealaiche a thòiseachadh. Tha am pàirt seo den config ag innse gun robh Webpack a’ coimhead airson JavaScript a’ phròiseict againn, far an cuir iad a-mach an còd cruinnichte gu ( dist), agus mar a bu chòir don fhrithealaiche leasachaidh a ghiùlan (a’ tarraing bhon distphasgan le ath-luchdachadh teth).

    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. An uairsin bidh sinn a 'lìonadh ar n-àite dist/index.html. Is e seo an duilleag HTML a luchdaicheas Webpack sa bhrobhsair gus an CSS cuachta agus JS a chleachdadh a chuireas sinn ris ann an ceumannan nas fhaide air adhart. Mus urrainn dhuinn sin a dhèanamh, feumaidh sinn rudeigin a thoirt dha airson a thoirt seachad agus an outputJS a thoirt a-steach bhon cheum roimhe.

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

    Tha sinn a’ toirt a-steach beagan de stoidhle Bootstrap an seo leis an div class="container"agus <button>gus am faic sinn cuin a bhios CSS Bootstrap air a luchdachadh le Webpack.

  3. A-nis feumaidh sinn sgriobt npm gus Webpack a ruith. Fosgail package.jsonagus cuir ris an startsgriobt gu h-ìosal (bu chòir dhut an sgriobt deuchainn a bhith agad mu thràth). Cleachdaidh sinn an sgriobt seo gus am frithealaiche ionadail Webpack dev againn a thòiseachadh.

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

  4. Agus mu dheireadh, is urrainn dhuinn Webpack a thòiseachadh. Bhon my-projectphasgan sa cheann-uidhe agad, ruith an sgriobt npm a tha air ùr chur ris:

    npm start
    Webpack dev am frithealaiche a ' ruith

Anns an ath earrann agus an earrann mu dheireadh den stiùireadh seo, cuiridh sinn air dòigh na luchdan Webpack agus bheir sinn a-steach CSS agus JavaScript gu lèir aig Bootstrap.

Cuir a-steach Bootstrap

Feumaidh toirt a-steach Bootstrap a-steach do Webpack na luchdan a chuir sinn a-steach sa chiad roinn. Tha sinn air an stàladh le npm, ach a-nis feumaidh Webpack a bhith air a rèiteachadh gus an cleachdadh.

  1. Suidhich na luchdan ann an webpack.config.js. Tha am faidhle rèiteachaidh agad a-nis deiseil agus bu chòir dha a bhith co-ionnan ris a’ chriomag gu h-ìosal. Is e an aon phàirt ùr an seo an moduleearrann.

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

    Seo geàrr-chunntas air carson a tha feum againn air na luchdan sin uile. style-loadera’ stealladh an CSS a-steach do <style>eileamaid ann an <head>duilleag HTML, css-loadera’ cuideachadh le bhith a’ cleachdadh @importagus url(), postcss-loadera tha riatanach airson Autoprefixer, agus sass-loadera’ leigeil leinn Sass a chleachdadh.

  2. A-nis, leig dhuinn CSS Bootstrap a thoirt a-steach. Cuir na leanas ris src/scss/styles.scssgus an stòr Bootstrap gu lèir a thoirt a-steach Sass.

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

    Faodaidh tu cuideachd na duilleagan stoidhle againn a thoirt a-steach leotha fhèin ma thogras tu. Leugh na docaichean in-mhalairt Sass againn airson mion-fhiosrachadh.

  3. An uairsin luchdaichidh sinn an CSS agus bheir sinn a-steach JavaScript Bootstrap. Cuir na leanas ris src/js/main.jsgus an CSS a luchdachadh agus cuir a-steach JS Bootstrap gu lèir. Thèid Popper a thoirt a-steach gu fèin-ghluasadach tro Bootstrap.

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

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

    Faodaidh tu cuideachd plugins JavaScript a thoirt a-steach leotha fhèin mar a dh ’fheumar gus meudan pasgan a chumail sìos:

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

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

    Leugh na docaichean JavaScript againn airson tuilleadh fiosrachaidh mu mar a chleachdas tu plugins Bootstrap.

  4. Agus tha thu deiseil! 🎉 Le stòr Bootstrap Sass agus JS làn luchdaichte, bu chòir don t-seirbheisiche leasachaidh ionadail agad a-nis coimhead mar seo.

    Frithealaiche webpack dev a ’ruith le Bootstrap

    A-nis faodaidh tu tòiseachadh air co-phàirtean Bootstrap sam bith a tha thu airson a chleachdadh a chuir ris. Dèan cinnteach gun toir thu sùil air a’ phròiseact eisimpleir Webpack iomlan airson mar a bheir thu a-steach Sass àbhaisteach a bharrachd agus an togail agad a bharrachadh le bhith a’ toirt a-steach dìreach na pàirtean de CSS agus JS aig Bootstrap a tha a dhìth ort.

Optimizations cinneasachadh

A rèir an t-suidheachaidh agad, is dòcha gum bi thu airson cuid de optimizations tèarainteachd is astar a bharrachd a chuir an gnìomh a tha feumail airson a’ phròiseact a ruith ann an cinneasachadh. Thoir an aire nach eil na optimizations sin air an cur an sàs ann am pròiseact eisimpleir Webpack agus tha e an urra riut fhèin a chuir an gnìomh.

A 'toirt air falbh CSS

Bidh an style-loaderrud a shuidhich sinn gu h-àrd gu h-iomchaidh a’ sgaoileadh CSS a-steach don phasgan gus nach eil feum air faidhle CSS a luchdachadh a-steach le làimh dist/index.html. Is dòcha nach obraich an dòigh-obrach seo le Poileasaidh Tèarainteachd Susbaint teann, ge-tà, agus dh’ fhaodadh gum bi e na bhotal san tagradh agad air sgàth cho mòr sa tha am pasgan.

Gus an CSS a sgaradh gus an urrainn dhuinn a luchdachadh gu dìreach bho dist/index.html, cleachd am mini-css-extract-loaderplugan Webpack.

An toiseach, stàlaich am plugan:

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

An uairsin cuir sa bhad agus cleachd am plugan ann an rèiteachadh 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
           },
           {

Às deidh dha ruith npm run builda-rithist, bidh faidhle ùr ann dist/main.css, anns am bi a h-uile CSS air a thoirt a-steach le src/js/main.js. Ma sheallas tu dist/index.htmlsa bhrobhsair agad an-dràsta, bidh an stoidhle a dhìth, mar a tha e a-nis ann an dist/main.css. Faodaidh tu an CSS a chaidh a chruthachadh a thoirt a-steach dist/index.htmlmar seo:

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

A 'toirt air falbh faidhlichean SVG

Tha CSS Bootstrap a’ toirt a-steach grunn iomraidhean air faidhlichean SVG tro data:URIan in-loidhne. Ma mhìnicheas tu Poileasaidh Tèarainteachd Susbaint airson do phròiseact a chuireas data:casg air URIan airson ìomhaighean, cha luchdaich na faidhlichean SVG sin. Gheibh thu timcheall air an duilgheadas seo le bhith a’ toirt a-mach na faidhlichean SVG in-loidhne a’ cleachdadh feart modalan so-mhaoin Webpack.

Dèan rèiteachadh air Webpack gus faidhlichean SVG in-loidhne mar seo a thoirt a-mach:

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

Às deidh dhut ruith npm run builda-rithist, lorgaidh tu na faidhlichean SVG air an toirt a-steach dist/iconsagus air an ainmeachadh gu ceart bho CSS.

Am faic thu rudeigin ceàrr no seann-fhasanta an seo? Feuch an fosgail thu cùis air GitHub . A bheil feum agad air cuideachadh gus fuasgladh fhaighinn air duilgheadasan? Rannsaich no tòisich còmhradh air GitHub.