Bootstrap at Webpack

Ang opisyal na gabay para sa kung paano isama at i-bundle ang CSS at JavaScript ng Bootstrap sa iyong proyekto gamit ang Webpack.

Sa pahinang ito

Gusto mo bang lumaktaw hanggang dulo? I-download ang source code at gumaganang demo para sa gabay na ito mula sa twbs/examples repository . Maaari mo ring buksan ang halimbawa sa StackBlitz para sa live na pag-edit.

Setup

Bumubuo kami ng isang proyekto sa Webpack gamit ang Bootstrap mula sa simula, kaya mayroong ilang mga kinakailangan at mga hakbang sa harap bago kami makapagsimula. Ang gabay na ito ay nangangailangan sa iyo na magkaroon ng Node.js na naka-install at ilang pamilyar sa terminal.

Lumikha ng folder ng proyekto at i-setup ang npm. Gagawin namin ang my-projectfolder at sisimulan ang npm gamit ang -yargumento upang maiwasang itanong sa amin ang lahat ng mga interactive na tanong.
```
mkdir my-project && cd my-project
npm init -y
```
I-install ang Webpack. Susunod na kailangan naming i-install ang aming mga dependency sa pag-develop ng Webpack: webpackpara sa core ng Webpack, webpack-clipara makapagpatakbo kami ng mga utos ng Webpack mula sa terminal, at webpack-dev-serverpara makapagpatakbo kami ng lokal na server ng development. Ginagamit namin --save-devupang hudyat na ang mga dependency na ito ay para lamang sa paggamit ng development at hindi para sa produksyon.
```
npm i --save-dev webpack webpack-cli webpack-dev-server
```
I-install ang Bootstrap. Ngayon ay maaari na nating i-install ang Bootstrap. Mag-i-install din kami ng Popper dahil ang aming mga dropdown, popover, at tooltip ay nakasalalay dito para sa kanilang pagpoposisyon. Kung hindi mo planong gamitin ang mga bahaging iyon, maaari mong alisin ang Popper dito.
```
npm i --save bootstrap @popperjs/core
```
Mag-install ng mga karagdagang dependency. Bilang karagdagan sa Webpack at Bootstrap, kailangan namin ng ilang higit pang mga dependency upang maayos na mai-import at ma-bundle ang CSS at JS ng Bootstrap sa Webpack. Kabilang dito ang Sass, ilang loader, at Autoprefixer.
```
npm i --save-dev autoprefixer css-loader postcss-loader sass sass-loader style-loader
```

Ngayong na-install na namin ang lahat ng kinakailangang dependency, maaari na kaming gumawa ng mga project file at mag-import ng Bootstrap.

Istraktura ng proyekto

Nagawa na namin ang my-projectfolder at sinimulan ang npm. Ngayon ay gagawa din kami ng aming srcat distmga folder upang i-round out ang istraktura ng proyekto. Patakbuhin ang sumusunod mula sa my-project, o manu-manong gawin ang folder at istraktura ng file na ipinapakita sa ibaba.

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

Kapag tapos ka na, ang iyong kumpletong proyekto ay dapat magmukhang ganito:

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

Sa puntong ito, nasa tamang lugar ang lahat, ngunit hindi gagana ang Webpack dahil hindi webpack.config.jspa namin napupunan ang aming.

I-configure ang Webpack

Sa mga naka-install na dependencies at handa na ang aming folder ng proyekto para sa amin upang simulan ang coding, maaari na naming i-configure ang Webpack at patakbuhin ang aming proyekto nang lokal.

Buksan webpack.config.jssa iyong editor. Dahil blangko ito, kakailanganin naming magdagdag ng ilang boilerplate config dito para masimulan namin ang aming server. Ang bahaging ito ng config ay nagsasabi sa Webpack na hanapin ang JavaScript ng aming proyekto, kung saan ilalabas ang pinagsama-samang code sa ( dist), at kung paano dapat kumilos ang development server (pagkuha mula sa distfolder na may mainit na reload).
```
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
  }
}
```

Susunod na punan namin ang aming dist/index.html. Ito ang HTML page na ilo-load ng Webpack sa browser upang magamit ang naka-bundle na CSS at JS na idaragdag namin dito sa mga susunod na hakbang. Bago natin magawa iyon, kailangan nating bigyan ito ng isang bagay upang i-render at isama ang outputJS mula sa nakaraang hakbang.

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

Nagsasama kami ng kaunting pag-istilo ng Bootstrap dito kasama ang div class="container"at <button>para makita namin kapag ni-load ng Webpack ang CSS ng Bootstrap.

Ngayon kailangan namin ng isang npm script upang patakbuhin ang Webpack. Buksan package.jsonat idagdag ang startscript na ipinapakita sa ibaba (dapat mayroon ka na ng test script). Gagamitin namin ang script na ito upang simulan ang aming lokal na Webpack dev server.
```
{
  // ...
  "scripts": {
    "start": "webpack serve --mode development",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  // ...
}
```
At sa wakas, maaari na nating simulan ang Webpack. Mula sa my-projectfolder sa iyong terminal, patakbuhin ang bagong idinagdag na npm script:
```
npm start
```

Sa susunod at huling seksyon sa gabay na ito, ise-set up namin ang mga Webpack loader at ii-import ang lahat ng CSS at JavaScript ng Bootstrap.

Mag-import ng Bootstrap

Ang pag-import ng Bootstrap sa Webpack ay nangangailangan ng mga loader na na-install namin sa unang seksyon. Na-install namin ang mga ito gamit ang npm, ngunit ngayon ay kailangang i-configure ang Webpack upang gamitin ang mga ito.

I-set up ang mga loader sa webpack.config.js. Kumpleto na ang iyong configuration file at dapat tumugma sa snippet sa ibaba. Ang tanging bagong bahagi dito ay ang moduleseksyon.

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

Narito ang isang recap kung bakit kailangan namin ang lahat ng mga loader na ito. style-loaderini -inject ang CSS sa isang <style>elemento sa <head>HTML page, css-loadertumutulong sa paggamit @importat url(), postcss-loaderay kinakailangan para sa Autoprefixer, at sass-loaderpinapayagan kaming gumamit ng Sass.

Ngayon, i-import natin ang CSS ng Bootstrap. Idagdag ang sumusunod sa src/scss/styles.scssupang i-import ang lahat ng pinagmulan ng Bootstrap na Sass.
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
Maaari mo ring i-import ang aming mga stylesheet nang paisa-isa kung gusto mo. Basahin ang aming Sass import docs para sa mga detalye.
Susunod na ni-load namin ang CSS at nag-import ng JavaScript ng Bootstrap. Idagdag ang sumusunod sa src/js/main.jsupang i-load ang CSS at i-import ang lahat ng JS ng Bootstrap. Awtomatikong mai-import ang Popper sa pamamagitan ng Bootstrap.
```
// Import our custom CSS
import '../scss/styles.scss'

// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
Maaari ka ring mag-import ng mga plugin ng JavaScript nang paisa-isa kung kinakailangan upang mapanatiling pababa ang mga laki ng bundle:
```
import Alert from 'bootstrap/js/dist/alert'

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap'
```
Basahin ang aming JavaScript docs para sa higit pang impormasyon sa kung paano gamitin ang mga plugin ng Bootstrap.
At tapos ka na! 🎉 Dahil ganap na na-load ang source ng Bootstrap na Sass at JS, dapat ganito na ang hitsura ng iyong lokal na development server.

Ngayon ay maaari kang magsimulang magdagdag ng anumang mga bahagi ng Bootstrap na gusto mong gamitin. Tiyaking tingnan ang kumpletong proyekto ng halimbawa ng Webpack para sa kung paano magsama ng karagdagang custom na Sass at i-optimize ang iyong build sa pamamagitan ng pag-import lamang ng mga bahagi ng CSS at JS ng Bootstrap na kailangan mo.

Mga pag-optimize ng produksyon

Depende sa iyong setup, maaaring gusto mong ipatupad ang ilang karagdagang seguridad at mga pag-optimize ng bilis na kapaki-pakinabang para sa pagpapatakbo ng proyekto sa produksyon. Tandaan na ang mga pag-optimize na ito ay hindi inilalapat sa halimbawang proyekto ng Webpack at nasa iyo ang pagpapatupad.

Pag-extract ng CSS

Ang style-loaderna-configure namin sa itaas ay maginhawang naglalabas ng CSS sa bundle upang hindi na kailangan ang manu-manong pag-load ng CSS file dist/index.html. Ang diskarte na ito ay maaaring hindi gumana sa isang mahigpit na Patakaran sa Seguridad ng Nilalaman, gayunpaman, at maaari itong maging isang bottleneck sa iyong aplikasyon dahil sa malaking laki ng bundle.

Upang paghiwalayin ang CSS upang mai-load namin ito nang direkta mula sa dist/index.html, gamitin ang mini-css-extract-loaderplugin ng Webpack.

Una, i-install ang plugin:

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

Pagkatapos ay i-instantiate at gamitin ang plugin sa configuration ng 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
           },
           {

Pagkatapos tumakbong npm run buildmuli, magkakaroon ng bagong file dist/main.css, na maglalaman ng lahat ng CSS na na-import ni src/js/main.js. Kung titingnan mo dist/index.htmlngayon sa iyong browser, mawawala ang istilo, dahil nasa dist/main.css. Maaari mong isama ang nabuong CSS sa dist/index.htmltulad nito:

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

Pag-extract ng mga SVG file

Kasama sa CSS ng Bootstrap ang maraming reference sa mga SVG file sa pamamagitan ng mga inline na data:URI. Kung tumukoy ka ng Patakaran sa Seguridad ng Nilalaman para sa iyong proyekto na humaharang data:sa mga URI para sa mga larawan, hindi maglo-load ang mga SVG file na ito. Malalampasan mo ang problemang ito sa pamamagitan ng pag-extract ng mga inline na SVG file gamit ang feature na mga asset module ng Webpack.

I-configure ang Webpack upang i-extract ang mga inline na SVG na file tulad nito:

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

Pagkatapos tumakbong npm run buildmuli, makikita mo ang mga SVG file na na-extract dist/iconsat maayos na na-refer mula sa CSS.

May nakikita kang mali o hindi napapanahon dito? Mangyaring magbukas ng isyu sa GitHub . Kailangan ng tulong sa pag-troubleshoot? Maghanap o magsimula ng talakayan sa GitHub.