Bootstrap & Webpack

An treoir oifigiúil maidir le conas CSS agus JavaScript Bootstrap a áireamh agus a chuachadh i do thionscadal ag baint úsáide as Webpack.

Ar an leathanach seo

Want a skip go dtí an deireadh? Íoslódáil an cód foinse agus an taispeántas oibre don treoir seo ón stór twbs/samplaí . Is féidir leat an sampla a oscailt freisin i StackBlitz le haghaidh eagarthóireacht bheo.

Socrú

Táimid ag tógáil tionscadal Webpack le Bootstrap ón tús, mar sin tá roinnt réamhriachtanais agus céimeanna tosaigh sular féidir linn tosú i ndáiríre. Éilíonn an treoir seo go bhfuil Node.js suiteáilte agat agus cur amach éigin ar an teirminéal.

Cruthaigh fillteán tionscadail agus cumraigh npm. Cruthóimid an my-projectfillteán agus cuirfimid npm i dtosach leis an -yargóint chun é a sheachaint ag cur na gceisteanna idirghníomhacha orainn go léir.
```
mkdir my-project && cd my-project
npm init -y
```
Suiteáil Webpack. Ansin ní mór dúinn ár spleáchais forbartha Webpack a shuiteáil: webpackle haghaidh croílár Webpack, webpack-cliionas gur féidir linn orduithe Webpack a rith ón teirminéal, agus webpack-dev-servermar sin is féidir linn freastalaí forbartha áitiúil a reáchtáil. Bainimid úsáid as --save-deva chur in iúl nach bhfuil na spleáchais seo ach le haghaidh úsáide forbartha agus ní le haghaidh táirgeadh.
```
npm i --save-dev webpack webpack-cli webpack-dev-server
```
Suiteáil Bootstrap. Anois is féidir linn Bootstrap a shuiteáil. Déanfaimid Popper a shuiteáil freisin ós rud é go mbraitheann ár gcuid dropdowns, popovers, agus leideanna uirlisí air chun iad a shuíomh. Mura bhfuil sé beartaithe agat na comhpháirteanna sin a úsáid, is féidir Popper a fhágáil ar lár anseo.
```
npm i --save bootstrap @popperjs/core
```
Suiteáil spleáchais bhreise. Chomh maith le Webpack agus Bootstrap, tá cúpla spleáchas eile ag teastáil uainn chun CSS agus JS Bootstrap a allmhairiú agus a chuachadh i gceart le Webpack. Ina measc seo tá Sass, roinnt lódóirí, agus Autoprefixer.
```
npm i --save-dev autoprefixer css-loader postcss-loader sass sass-loader style-loader
```

Anois go bhfuil na spleáchais riachtanacha go léir suiteáilte againn, is féidir linn dul i mbun oibre ag cruthú na gcomhad tionscadail agus ag iompórtáil Bootstrap.

Struchtúr an tionscadail

Chruthaigheamar an my-projectfillteán cheana féin agus chuireamar tús leis npm. Anois cruthóimid ár gcuid srcagus distfillteáin freisin chun struchtúr an tionscadail a shlánú. Rith an méid seo a leanas ó my-project, nó cruthaigh an fillteán agus an struchtúr comhaid a thaispeántar thíos de láimh.

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

Nuair a bheidh tú críochnaithe, ba cheart go mbeadh cuma mar seo ar do thionscadal iomlán:

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

Ag an bpointe seo, tá gach rud san áit cheart, ach ní oibreoidh Webpack toisc nach bhfuil ár gcuid líonta isteach againn webpack.config.jsfós.

Cumraigh Webpack

Le spleáchais suiteáilte agus ár bhfillteán tionscadail réidh chun códú a thosú, is féidir linn Webpack a chumrú anois agus ár dtionscadal a reáchtáil go háitiúil.

Oscail webpack.config.jsi d'eagarthóir. Ós rud é go bhfuil sé bán, beidh orainn roinnt cumraíochta pláta coire a chur leis ionas gur féidir linn ár bhfreastalaí a thosú. Insíonn an chuid seo den chumraíocht go raibh Webpack ag lorg JavaScript ár dtionscadal, cén áit ar cheart an cód tiomsaithe a aschur go ( dist), agus conas ba cheart don fhreastalaí forbartha é féin a iompar (ag tarraingt as an distbhfillteán le hathlódáil te).
```
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
  }
}
```
Ansin líonaimid ár dist/index.html. Seo é an leathanach HTML a luchtóidh Webpack sa bhrabhsálaí chun an CSS cuachta agus an JS a úsáid a chuirfimid leis i gcéimeanna níos déanaí. Sular féidir linn é sin a dhéanamh, ní mór dúinn rud éigin a thabhairt dó agus an outputJS ón gcéim roimhe sin a áireamh.
```
<!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>
```
Táimid ag áireamh beagán de stíliú Bootstrap anseo leis an div class="container"agus <button>ionas go bhfeicfimid nuair a bheidh CSS Bootstrap luchtaithe ag Webpack.
Anois teastaíonn script npm uainn chun Webpack a rith. Oscail package.jsonagus cuir leis an startscript a thaispeántar thíos (ba cheart go mbeadh an script tástála agat cheana féin). Úsáidfimid an script seo chun ár bhfreastalaí forbartha Webpack áitiúil a thosú.
```
{
  // ...
  "scripts": {
    "start": "webpack serve --mode development",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  // ...
}
```
Agus ar deireadh, is féidir linn Webpack a thosú. Ón my-projectfhillteán i do chríochfort, rith an script npm nua-chur leis:
```
npm start
```

Sa chéad chuid eile agus sa chuid dheireanach den treoir seo, socróimid na lódairí Webpack agus iompórtálfaimid CSS agus JavaScript de chuid Bootstrap.

Iompórtáil Bootstrap

Teastaíonn na lódairí a chuireamar isteach sa chéad chuid chun Bootstrap a iompórtáil go Webpack. Táimid tar éis iad a shuiteáil le npm, ach anois ní mór Webpack a chumrú chun iad a úsáid.

Socraigh na lódairí i webpack.config.js. Tá do chomhad cumraíochta críochnaithe anois agus ba cheart go mbeadh sé ag teacht leis an mblúire thíos. Is é an t-aon chuid nua anseo ná an t- modulealt.

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 achoimre ar an bhfáth go bhfuil na lódairí seo go léir de dhíth orainn. style-loaderinstealladh an CSS isteach i <style>eilimint <head>ar an leathanach HTML, css-loadercuidíonn le húsáid @importagus url(), postcss-loaderag teastáil le haghaidh Autoprefixer, agus sass-loaderligeann dúinn a úsáid Sass.

Anois, déanaimis CSS Bootstrap a allmhairiú. Cuir an méid seo a leanas leis src/scss/styles.scsschun foinse Bootstrap go léir a allmhairiú Sass.
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
Is féidir leat freisin ár stílbhileoga a allmhairiú ina n-aonar más mian leat. Léigh ár ndoiciméid allmhairiú Sass le haghaidh sonraí.
Ansin déanaimid an CSS a luchtú agus JavaScript Bootstrap a allmhairiú. Cuir an méid seo a leanas leis src/js/main.jschun an CSS a luchtú agus iompórtáil JS Bootstrap ar fad. Déanfar Popper a allmhairiú go huathoibríoch trí Bootstrap.
```
// Import our custom CSS
import '../scss/styles.scss'

// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
Is féidir leat freisin forlíontáin JavaScript a iompórtáil ina n-aonar de réir mar is gá chun méideanna cuachta a choinneáil síos:
```
import Alert from 'bootstrap/js/dist/alert'

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap'
```
Léigh ár ndoiciméid JavaScript le haghaidh tuilleadh eolais ar conas forlíontáin Bootstrap a úsáid.
Agus tá tú críochnaithe! 🎉 Agus foinse Bootstrap Sass agus JS lódáilte go hiomlán, ba cheart go mbeadh cuma mar seo ar do fhreastalaí forbartha áitiúil anois.

Anois is féidir leat tosú ag cur aon chomhpháirteanna Bootstrap is mian leat a úsáid. Bí cinnte an tionscadal samplach Webpack iomlán a sheiceáil le haghaidh conas Sass saincheaptha breise a chur san áireamh agus do thógáil a bharrfheabhsú trí na codanna de CSS agus JS Bootstrap amháin atá uait a iompórtáil.

Optimizations táirgeachta

Ag brath ar do shocrú, b'fhéidir gur mhaith leat roinnt leas iomlán a bhaint as slándáil agus luas breise a bheidh úsáideach chun an tionscadal a reáchtáil i dtáirgeadh. Tabhair faoi deara nach gcuirtear na huasmhéaduithe seo i bhfeidhm ar thionscadal samplach Webpack agus gur fút féin atá siad a chur i bhfeidhm.

CSS a bhaint

Leis an style-loaderméid atá cumraithe againn thuas, scaoileann sé CSS isteach sa bheart go caothúil ionas nach gá comhad CSS a lódáil de láimh dist/index.html. Seans nach n-oibreoidh an cur chuige seo le dianbheartas um Shlándáil Ábhar, áfach, agus d’fhéadfadh sé a bheith ina bhac ar d’iarratas mar gheall ar mhéid an chuachta mhóir.

Chun an CSS a scaradh ionas gur féidir linn é a lódáil go díreach ó dist/index.html, bain úsáid as an mini-css-extract-loaderbreiseán Webpack.

Ar dtús, suiteáil an breiseán:

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

Ansin cuir ar an toirt agus úsáid an breiseán i gcumraíocht 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
           },
           {

Tar éis dó a bheith ag rith npm run buildarís, beidh comhad nua ann dist/main.css, ina mbeidh an CSS ar fad arna hiompórtáil ag src/js/main.js. Má fheiceann tú dist/index.htmli do bhrabhsálaí anois, beidh an stíl in easnamh, mar atá sé anois i dist/main.css. Is féidir leat an CSS ginte a chur san áireamh 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>

Comhaid SVG a bhaint

Áiríonn CSS Bootstrap tagairtí iolracha do chomhaid SVG trí data:URIanna inlíne. Má shainíonn tú Beartas Slándála Inneachair do do thionscadal a dhéanann bac data:ar URIanna d’íomhánna, ansin ní luchtófar na comhaid SVG seo. Is féidir leat teacht timpeall ar an bhfadhb seo trí na comhaid SVG inlíne a bhaint as gné modúil sócmhainní Webpack.

Cumraigh Webpack chun comhaid SVG inlíne mar seo a bhaint as:

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

Tar éis duit a bheith ag rith npm run buildarís, gheobhaidh tú na comhaid SVG a bhaintear isteach dist/iconsagus tagairt cheart dóibh ó CSS.

Féach ar rud éigin mícheart nó as dáta anseo? Oscail ceist ar GitHub le do thoil . Cabhair uait le fabhtcheartú? Cuardaigh nó cuir tús le plé ar GitHub.