Rekọja si akoonu akọkọ Rekọja si lilọ kiri awọn docs
Check
in English

Bootstrap & Webpack

Itọsọna osise fun bi o ṣe le ṣafikun ati dipọ Bootstrap's CSS ati JavaScript ninu iṣẹ akanṣe rẹ nipa lilo apo-iwe wẹẹbu.

Lori iwe yi
Ṣe o fẹ lati fo si opin? Ṣe igbasilẹ koodu orisun ati demo iṣẹ fun itọsọna yii lati ibi ipamọ twbs/awọn apẹẹrẹ . O tun le ṣii apẹẹrẹ ni StackBlitz fun ṣiṣatunṣe laaye.

Ṣeto

A n kọ iṣẹ akanṣe Webpack pẹlu Bootstrap lati ibere, nitorinaa diẹ ninu awọn ohun pataki wa ati awọn igbesẹ iwaju ṣaaju ki a to le bẹrẹ gaan. Itọsọna yii nilo ki o fi Node.js sori ẹrọ ati imọ diẹ pẹlu ebute naa.

  1. Ṣẹda folda ise agbese ati iṣeto npm. A yoo ṣẹda my-projectfolda naa ki o bẹrẹ npm pẹlu -yariyanjiyan lati yago fun bibeere gbogbo awọn ibeere ibaraenisepo wa.

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

  2. Fi sori ẹrọ Webpack. Nigbamii ti a nilo lati fi sori ẹrọ awọn igbẹkẹle idagbasoke Webpack wa: webpackfun mojuto ti Webpack, webpack-clinitorinaa a le ṣiṣe awọn aṣẹ Webpack lati ebute, ati webpack-dev-servernitorinaa a le ṣiṣe olupin idagbasoke agbegbe kan. A lo --save-devlati ṣe ifihan pe awọn igbẹkẹle wọnyi wa fun lilo idagbasoke nikan kii ṣe fun iṣelọpọ.

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

  3. Fi Bootstrap sori ẹrọ. Bayi a le fi Bootstrap sori ẹrọ. A yoo tun fi Popper sori ẹrọ nitori awọn isọ silẹ wa, awọn agbejade, ati awọn imọran irinṣẹ da lori rẹ fun ipo wọn. Ti o ko ba gbero lori lilo awọn paati yẹn, o le fi Popper silẹ nibi.

    npm i --save bootstrap @popperjs/core

  4. Fi awọn igbẹkẹle afikun sori ẹrọ. Ni afikun si Webpack ati Bootstrap, a nilo awọn igbẹkẹle diẹ sii lati gbe wọle daradara ati ṣajọpọ Bootstrap's CSS ati JS pẹlu Webpack. Iwọnyi pẹlu Sass, diẹ ninu awọn agberu, ati Autoprefixer.

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

Ni bayi ti a ti fi sori ẹrọ gbogbo awọn igbẹkẹle pataki, a le gba lati ṣiṣẹ ṣiṣẹda awọn faili iṣẹ akanṣe ati gbigbe Bootstrap wọle.

Ilana ise agbese

A ti ṣẹda my-projectfolda tẹlẹ ati ṣe ipilẹṣẹ npm. Ni bayi a yoo tun ṣẹda wa srcati awọn distfolda lati yika eto iṣẹ akanṣe naa. Ṣiṣe awọn atẹle lati my-project, tabi pẹlu ọwọ ṣẹda folda ati ọna faili ti o han ni isalẹ.

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

Nigbati o ba ti pari, iṣẹ akanṣe rẹ ni kikun yẹ ki o dabi eyi:

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

Ni aaye yii, ohun gbogbo wa ni aye to tọ, ṣugbọn Webpack kii yoo ṣiṣẹ nitori a ko ti kun ninu wa webpack.config.jssibẹsibẹ.

Tunto Webpack

Pẹlu awọn igbẹkẹle ti a fi sori ẹrọ ati folda agbese wa ti ṣetan fun wa lati bẹrẹ ifaminsi, a le tunto Webpack bayi ati ṣiṣe iṣẹ akanṣe wa ni agbegbe.

  1. Ṣii webpack.config.jsninu olootu rẹ. Niwọn bi o ti ṣofo, a yoo nilo lati ṣafikun atunto igbomikana diẹ si ki a le bẹrẹ olupin wa. Apa yii ti atunto sọ fun Webpack lati wa JavaScript ti iṣẹ akanṣe wa, nibiti o ti le ṣejade koodu ti a ṣajọpọ si ( dist), ati bii olupin idagbasoke ṣe yẹ ki o huwa (yilọ lati distfolda pẹlu atunbere gbona).

    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. Nigbamii ti a fọwọsi wa dist/index.html. Eyi ni oju-iwe HTML Webpack yoo kojọpọ ninu ẹrọ aṣawakiri lati lo CSS ti o ni idapọ ati JS a yoo ṣafikun si ni awọn igbesẹ nigbamii. Ṣaaju ki a to le ṣe iyẹn, a ni lati fun ni nkankan lati ṣe ati pẹlu outputJS lati igbesẹ iṣaaju.

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

    A n pẹlu diẹ diẹ ti iselona Bootstrap nibi pẹlu div class="container"ati <button>nitorinaa a rii nigbati Bootstrap's CSS ti kojọpọ nipasẹ Webpack.

  3. Bayi a nilo iwe afọwọkọ npm kan lati ṣiṣẹ Webpack. Ṣii package.jsonati ṣafikun iwe startafọwọkọ ti o han ni isalẹ (o yẹ ki o ti ni iwe afọwọkọ idanwo tẹlẹ). A yoo lo iwe afọwọkọ yii lati bẹrẹ olupin dev Webpack agbegbe wa.

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

  4. Ati nikẹhin, a le bẹrẹ Webpack. Lati my-projectfolda ninu ebute rẹ, ṣiṣẹ iwe afọwọkọ npm tuntun ti a ṣafikun:

    npm start
    Webpack dev olupin nṣiṣẹ

Ni apakan atẹle ati ipari si itọsọna yii, a yoo ṣeto awọn agberu oju opo wẹẹbu ati gbe gbogbo Bootstrap's CSS ati JavaScript wọle.

Gbe Bootstrap wọle

Gbigbe Bootstrap wọle sinu Webpack nilo awọn agberu ti a fi sii ni apakan akọkọ. A ti fi wọn sii pẹlu npm, ṣugbọn ni bayi Webpack nilo lati tunto lati lo wọn.

  1. Ṣeto awọn agberu sinu webpack.config.js. Faili iṣeto rẹ ti pari ati pe o yẹ ki o baamu snippet ni isalẹ. Awọn nikan titun apakan nibi ni moduleapakan.

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

    Eyi ni atunṣe idi ti a nilo gbogbo awọn agberu wọnyi. style-loadernfi CSS sinu <style>eroja kan ninu oju <head>-iwe HTML, css-loaderṣe iranlọwọ pẹlu lilo @importati url(), postcss-loadernilo fun Autoprefixer, ati sass-loadergba wa laaye lati lo Sass.

  2. Bayi, jẹ ki a gbe Bootstrap's CSS wọle. Ṣafikun atẹle naa src/scss/styles.scsslati gbe gbogbo orisun Bootstrap Sass wọle.

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

    O tun le gbe awọn iwe aṣa wa wọle lọkọọkan ti o ba fẹ. Ka awọn iwe aṣẹ agbewọle Sass wa fun awọn alaye.

  3. Nigbamii ti a fifuye CSS ati gbe Bootstrap JavaScript wọle. Ṣafikun atẹle naa src/js/main.jslati ṣaja CSS ati gbe gbogbo Bootstrap's JS wọle. Popper yoo wa ni akowọle laifọwọyi nipasẹ Bootstrap.

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

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

    O tun le gbe awọn afikun JavaScript wọle lọkọọkan bi o ṣe nilo lati tọju awọn iwọn lapapo si isalẹ:

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

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

    Ka awọn iwe aṣẹ JavaScript wa fun alaye diẹ sii lori bi a ṣe le lo awọn afikun Bootstrap.

  4. Ati pe o ti pari! 🎉 Pẹlu orisun Bootstrap Sass ati JS ti kojọpọ ni kikun, olupin idagbasoke agbegbe rẹ yẹ ki o dabi eyi.

    Webpack dev olupin nṣiṣẹ pẹlu Bootstrap

    Bayi o le bẹrẹ fifi eyikeyi awọn paati Bootstrap ti o fẹ lati lo. Rii daju pe o ṣayẹwo iṣẹ apẹẹrẹ Webpack pipe fun bii o ṣe le pẹlu afikun aṣa Sass ki o mu kiko rẹ pọ si nipa gbigbe wọle nikan awọn apakan Bootstrap's CSS ati JS ti o nilo.

Awọn iṣapeye iṣelọpọ

Da lori iṣeto rẹ, o le fẹ lati ṣe diẹ ninu aabo afikun ati awọn iṣapeye iyara ti o wulo fun ṣiṣe iṣẹ akanṣe ni iṣelọpọ. Ṣe akiyesi pe awọn iṣapeye wọnyi ko lo lori iṣẹ akanṣe apẹẹrẹ Webpack ati pe o wa lọwọ rẹ lati ṣe.

Yiyọ kuro CSS

Ohun style-loaderti a tunto loke ni irọrun n tu CSS sinu lapapo ki ikojọpọ faili CSS pẹlu ọwọ dist/index.htmlko ṣe pataki. Ọna yii le ma ṣiṣẹ pẹlu Ilana Aabo Akoonu ti o muna, sibẹsibẹ, ati pe o le di igo ninu ohun elo rẹ nitori iwọn lapapo nla.

Lati ya CSS kuro ki a le kojọpọ taara lati dist/index.html, lo mini-css-extract-loaderohun itanna Webpack.

Ni akọkọ, fi sori ẹrọ itanna naa:

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

Lẹhinna ṣe lẹsẹkẹsẹ ki o lo ohun itanna ninu iṣeto 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
           },
           {

Lẹhin ti nṣiṣẹ npm run buildlẹẹkansi, faili titun yoo wa dist/main.css, eyi ti yoo ni gbogbo CSS ti o wọle nipasẹ src/js/main.js. Ti o ba wo dist/index.htmlẹrọ aṣawakiri rẹ ni bayi, aṣa naa yoo padanu, bi o ti wa ni bayi ni dist/main.css. O le ṣafikun CSS ti ipilẹṣẹ ni dist/index.htmlbii eyi:

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

Yiyọ awọn faili SVG

Bootstrap's CSS pẹlu ọpọlọpọ awọn itọkasi si awọn faili SVG nipasẹ awọn data:URI laini. Ti o ba ṣalaye Ilana Aabo Akoonu kan fun iṣẹ akanṣe rẹ ti o dina data:URIs fun awọn aworan, lẹhinna awọn faili SVG wọnyi kii yoo fifuye. O le ni ayika iṣoro yii nipa yiyo awọn faili SVG inline ni lilo ẹya awọn modulu dukia Webpack.

Tunto Webpack lati yọkuro awọn faili SVG laini bi eleyi:

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

Lẹhin ti nṣiṣẹ npm run buildlẹẹkansi, iwọ yoo rii awọn faili SVG ti a fa jade sinu dist/iconsati tọka daradara lati CSS.

Ri nkankan ti ko tọ tabi ti ọjọ nibi? Jọwọ ṣii ọrọ kan lori GitHub . Nilo iranlọwọ laasigbotitusita? Wa tabi bẹrẹ ijiroro lori GitHub.