Neidio i'r prif gynnwys Neidio i lywio dogfennau
Check
in English

Bootstrap & Webpack

Y canllaw swyddogol ar sut i gynnwys a bwndelu CSS a JavaScript Bootstrap yn eich prosiect gan ddefnyddio Webpack.

Ar y dudalen hon
Eisiau neidio i'r diwedd? Lawrlwythwch y cod ffynhonnell a'r demo gweithredol ar gyfer y canllaw hwn o'r ystorfa twbs/enghreifftiau . Gallwch hefyd agor yr enghraifft yn StackBlitz ar gyfer golygu byw.

Gosod

Rydyn ni'n adeiladu prosiect Webpack gyda Bootstrap o'r newydd, felly mae rhai rhagofynion a chamau ymlaen cyn y gallwn ddechrau arni o ddifrif. Mae'r canllaw hwn yn ei gwneud yn ofynnol i chi gael Node.js wedi'i osod a rhywfaint o gyfarwydd â'r derfynell.

  1. Creu ffolder prosiect a gosod npm. Byddwn yn creu'r my-projectffolder ac yn cychwyn npm gyda'r -yddadl i osgoi gofyn y cwestiynau rhyngweithiol i ni i gyd.

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

  2. Gosod Webpack. Nesaf mae angen i ni osod ein dibyniaethau datblygu Webpack: webpackar gyfer craidd Webpack, webpack-clifel y gallwn redeg gorchmynion Webpack o'r derfynell, ac webpack-dev-serverfelly gallwn redeg gweinydd datblygu lleol. Rydym yn defnyddio --save-devi nodi bod y dibyniaethau hyn ar gyfer defnydd datblygu yn unig ac nid ar gyfer cynhyrchu.

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

  3. Gosod Bootstrap.Nawr gallwn osod Bootstrap. Byddwn hefyd yn gosod Popper gan fod ein cwymplenni, popovers, a chynghorion offer yn dibynnu arno ar gyfer eu lleoli. Os nad ydych yn bwriadu defnyddio'r cydrannau hynny, gallwch hepgor Popper yma.

    npm i --save bootstrap @popperjs/core

  4. Gosod dibyniaethau ychwanegol.Yn ogystal â Webpack a Bootstrap, mae angen ychydig mwy o ddibyniaethau arnom i fewnforio a bwndelu CSS a JS Bootstrap yn gywir gyda Webpack. Mae'r rhain yn cynnwys Sass, rhai llwythwyr, ac Autoprefixer.

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

Nawr bod gennym yr holl ddibyniaethau angenrheidiol wedi'u gosod, gallwn gyrraedd y gwaith o greu'r ffeiliau prosiect a mewnforio Bootstrap.

Strwythur y prosiect

Rydym eisoes wedi creu'r my-projectffolder ac wedi cychwyn npm. Nawr byddwn hefyd yn creu ein ffolderi srca'n distffolderi i dalgrynnu strwythur y prosiect. Rhedeg y canlynol omy-project , neu crëwch y ffolder a'r strwythur ffeil a ddangosir isod â llaw.

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

Pan fyddwch wedi gorffen, dylai eich prosiect cyflawn edrych fel hyn:

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

Ar y pwynt hwn, mae popeth yn y lle iawn, ond ni fydd Webpack yn gweithio oherwydd nid ydym wedi llenwi ein pecyn webpack.config.jseto.

Ffurfweddu Webpack

Gyda dibyniaethau wedi'u gosod a'n ffolder prosiect yn barod i ni ddechrau codio, gallwn nawr ffurfweddu Webpack a rhedeg ein prosiect yn lleol.

  1. Agorwch webpack.config.jsyn eich golygydd. Gan ei fod yn wag, bydd angen i ni ychwanegu rhywfaint o ffurfwedd plât boeler ato fel y gallwn gychwyn ein gweinydd. Mae'r rhan hon o'r ffurfwedd yn dweud wrth Webpack y byddai'n chwilio am JavaScript ein prosiect, ble i allbynnu'r cod a luniwyd i ( dist), a sut y dylai'r gweinydd datblygu ymddwyn (tynnu o'r distffolder gydag ail-lwytho poeth).

    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. Nesaf rydym yn llenwi ein dist/index.html. Dyma'r dudalen HTML y bydd Webpack yn ei llwytho yn y porwr i ddefnyddio'r CSS wedi'u bwndelu a JS byddwn yn ychwanegu ato mewn camau diweddarach. Cyn y gallwn wneud hynny, mae'n rhaid i ni roi rhywbeth i'w gyflwyno a chynnwys y outputJS o'r cam blaenorol.

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

    Rydyn ni'n cynnwys ychydig o steilio Bootstrap yma gyda'r div class="container"ac <button>fel ein bod ni'n gweld pan fydd CSS Bootstrap yn cael ei lwytho gan Webpack.

  3. Nawr mae angen sgript npm i redeg Webpack. Agorwch package.jsonac ychwanegwch y startsgript a ddangosir isod (dylai fod gennych y sgript prawf eisoes). Byddwn yn defnyddio'r sgript hon i gychwyn ein gweinydd datblygu Webpack lleol.

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

  4. Ac yn olaf, gallwn ddechrau Webpack. O'r my-projectffolder yn eich terfynell, rhedwch y sgript npm sydd newydd ei ychwanegu:

    npm start
    Webpack gweinydd dev yn rhedeg

Yn yr adran nesaf ac olaf i'r canllaw hwn, byddwn yn sefydlu'r llwythwyr Webpack ac yn mewnforio holl CSS a JavaScript Bootstrap.

Mewnforio Bootstrap

Mae angen y llwythwyr a osodwyd gennym yn yr adran gyntaf i fewnforio Bootstrap i Webpack. Rydyn ni wedi eu gosod gydag npm, ond nawr mae angen ffurfweddu Webpack i'w defnyddio.

  1. Gosodwch y llwythwyr yn webpack.config.js. Mae eich ffeil ffurfweddu bellach wedi'i chwblhau a dylai gyd-fynd â'r pyt isod. Yr unig ran newydd yma yw'r moduleadran.

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

    Dyma grynodeb o pam mae angen yr holl lwythwyr hyn arnom. style-loaderyn chwistrellu'r CSS i <style>elfen yn y <head>dudalen HTML, css-loaderyn helpu gyda defnyddio @importa url(), postcss-loaderyn ofynnol ar gyfer Autoprefixer, asass-loader yn caniatáu i ni ddefnyddio Sass.

  2. Nawr, gadewch i ni fewnforio CSS Bootstrap. Ychwanegwch y canlynol i src/scss/styles.scssfewngludo holl ffynhonnell Bootstrap Sass.

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

    Gallwch hefyd fewnforio ein dalennau arddull yn unigol os dymunwch. Darllenwch ein dogfennau mewnforio Sass am fanylion.

  3. Nesaf rydyn ni'n llwytho'r CSS ac yn mewnforio JavaScript Bootstrap. Ychwanegwch y canlynol i src/js/main.jslwytho'r CSS a mewngludo holl JS Bootstrap. Bydd popper yn cael ei fewnforio yn awtomatig trwy Bootstrap.

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

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

    Gallwch hefyd fewnforio ategion JavaScript yn unigol yn ôl yr angen i gadw meintiau bwndel i lawr:

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

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

    Darllenwch ein dogfennau JavaScript i gael rhagor o wybodaeth am sut i ddefnyddio ategion Bootstrap.

  4. Ac rydych chi wedi gorffen! 🎉 Gyda ffynhonnell Bootstrap, Sass a JS wedi'i llwytho'n llawn, dylai eich gweinydd datblygu lleol edrych fel hyn nawr.

    Gweinydd dev Webpack yn rhedeg gyda Bootstrap

    Nawr gallwch chi ddechrau ychwanegu unrhyw gydrannau Bootstrap rydych chi am eu defnyddio. Gwnewch yn siŵr eich bod yn edrych ar y prosiect enghreifftiol Webpack cyflawn i weld sut i gynnwys Sass personol ychwanegol a gwneud y gorau o'ch adeiladwaith trwy fewnforio dim ond y rhannau o CSS a JS Bootstrap sydd eu hangen arnoch chi.

Optimeiddio cynhyrchu

Yn dibynnu ar eich gosodiad, efallai y byddwch am weithredu rhai optimeiddio diogelwch a chyflymder ychwanegol sy'n ddefnyddiol ar gyfer rhedeg y prosiect wrth gynhyrchu. Sylwch nad yw'r optimeiddiadau hyn yn cael eu cymhwyso ar brosiect enghreifftiol Webpack a chi sy'n gyfrifol am eu gweithredu.

Echdynnu CSS

Mae'r style-loaderhyn rydym wedi'i ffurfweddu uchod yn allyrru CSS yn gyfleus i'r bwndel fel nad oes angen llwytho ffeil CSS i mewn â llaw dist/index.html. Efallai na fydd y dull hwn yn gweithio gyda Pholisi Diogelwch Cynnwys llym, fodd bynnag, a gall ddod yn dagfa yn eich cais oherwydd maint y bwndel mawr.

I wahanu'r CSS fel y gallwn ei lwytho'n uniongyrchol o dist/index.html, defnyddiwch yr mini-css-extract-loaderategyn Webpack.

Yn gyntaf, gosodwch yr ategyn:

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

Yna sythwch a defnyddiwch yr ategyn yng nghyfluniad 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
           },
           {

Ar ôl rhedeg npm run buildeto, bydd ffeil newydd dist/main.css, a fydd yn cynnwys yr holl CSS a fewnforiwyd gan src/js/main.js. Os edrychwch dist/index.htmlyn eich porwr nawr, bydd yr arddull ar goll, fel y mae nawr yn dist/main.css. Gallwch gynnwys y CSS a gynhyrchir dist/index.htmlfel hyn:

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

Tynnu ffeiliau SVG

Mae CSS Bootstrap yn cynnwys cyfeiriadau lluosog at ffeiliau SVG trwy data:URIau mewnol. Os ydych chi'n diffinio Polisi Diogelwch Cynnwys ar gyfer eich prosiect mae hynny'n blociodata: URI ar gyfer delweddau, yna ni fydd y ffeiliau SVG hyn yn llwytho. Gallwch fynd o gwmpas y broblem hon trwy echdynnu'r ffeiliau SVG mewnol gan ddefnyddio nodwedd modiwlau asedau Webpack.

Ffurfweddwch Webpack i echdynnu ffeiliau SVG mewnol fel hyn:

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

Ar ôl rhedeg npm run buildeto, fe welwch fod y ffeiliau SVG wedi'u tynnu i mewn i dist/iconsCSS ac wedi'u cyfeirio'n gywir atynt.

Gweld rhywbeth o'i le neu wedi dyddio yma? Agorwch broblem ar GitHub . Angen help i ddatrys problemau? Chwiliwch neu dechreuwch drafodaeth ar GitHub.