Bootstrap ug Webpack

Ang opisyal nga giya kung unsaon pag-apil ug pag-bundle sa Bootstrap's CSS ug JavaScript sa imong proyekto gamit ang Webpack.

Niini nga panid

Gusto nga molaktaw hangtod sa katapusan? I-download ang source code ug working demo para niini nga giya gikan sa twbs/examples repository . Mahimo usab nimo ablihan ang panig-ingnan sa StackBlitz alang sa live nga pag-edit.

Setup

Naghimo kami usa ka proyekto sa Webpack nga adunay Bootstrap gikan sa wala, mao nga adunay pipila nga mga kinahanglanon ug mga lakang sa unahan sa dili pa kami makasugod. Kini nga giya nagkinahanglan kanimo nga ma-install ang Node.js ug pipila ka pamilyar sa terminal.

Paghimo og folder sa proyekto ug pag-setup sa npm. Himoon namo ang my-projectfolder ug sugdan ang npm gamit ang -yargumento aron malikayan kini nga mangutana kanamo sa tanang interactive nga mga pangutana.
```
mkdir my-project && cd my-project
npm init -y
```
I-install ang Webpack. Sunod kinahanglan namong i-install ang among mga dependency sa pagpalambo sa Webpack: webpackalang sa kinauyokan sa Webpack, webpack-cliaron makadagan kami sa mga sugo sa Webpack gikan sa terminal, ug webpack-dev-serveraron makadagan kami og lokal nga development server. Gigamit namon ang --save-devpagsenyas nga kini nga mga dependency alang lamang sa paggamit sa pagpalambo ug dili alang sa produksiyon.
```
npm i --save-dev webpack webpack-cli webpack-dev-server
```
I-install ang Bootstrap. Karon mahimo na namon i-install ang Bootstrap. I-install usab namo ang Popper tungod kay ang among mga dropdown, popovers, ug tooltips nagdepende niini alang sa ilang pagposisyon. Kung wala ka nagplano sa paggamit sa mga sangkap, mahimo nimong laktawan ang Popper dinhi.
```
npm i --save bootstrap @popperjs/core
```
Pag-instalar og dugang nga mga dependency. Agi og dugang sa Webpack ug Bootstrap, nanginahanglan kami og pipila pa nga mga dependency aron sa husto nga pag-import ug pagbugkos sa Bootstrap's CSS ug JS sa Webpack. Naglakip kini sa Sass, pipila nga mga loader, ug Autoprefixer.
```
npm i --save-dev autoprefixer css-loader postcss-loader sass sass-loader style-loader
```

Karon nga naa na namo ang tanang gikinahanglang mga dependency nga na-install, makatrabaho na kami sa paghimo sa mga file sa proyekto ug pag-import sa Bootstrap.

Istruktura sa proyekto

Nahimo na namo ang my-projectfolder ug gisugdan ang npm. Karon maghimo usab kami sa among srcug mga distfolder aron malibot ang istruktura sa proyekto. Pagdalagan ang mosunud gikan sa my-project, o kamut paghimo sa folder ug istruktura sa file nga gipakita sa ubos.

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

Kung nahuman na ka, ang imong kompleto nga proyekto kinahanglan nga ingon niini:

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

Niini nga punto, ang tanan naa sa husto nga lugar, apan ang Webpack dili molihok tungod kay wala pa namon mapuno ang among webpack.config.js.

I-configure ang Webpack

Uban sa mga dependency nga na-install ug ang among project folder andam na namo sa pagsugod sa coding, mahimo na namo nga i-configure ang Webpack ug ipadagan ang among proyekto sa lokal.

Ablihi webpack.config.jssa imong editor. Tungod kay blangko kini, kinahanglan namong idugang ang pipila ka boilerplate config niini aron makasugod kami sa among server. Kini nga bahin sa config nagsulti sa Webpack nga pangitaon ang JavaScript sa among proyekto, kung asa i-output ang giipon nga code sa ( dist), ug kung giunsa ang paggawi sa development server (pagbira gikan sa distfolder nga adunay init nga 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
  }
}
```

Sunod atong pun-on ang atong dist/index.html. Kini ang HTML nga panid nga ikarga sa Webpack sa browser aron magamit ang gibugkos nga CSS ug JS nga among idugang niini sa ulahi nga mga lakang. Sa dili pa nato mahimo kana, kinahanglan natong hatagan kini og usa ka butang nga i-render ug ilakip ang outputJS gikan sa miaging lakang.

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

Among gilakip ang gamay nga pag-istilo sa Bootstrap dinhi uban ang div class="container"ug <button>aron atong makita kung ang CSS sa Bootstrap gikarga sa Webpack.

Karon kinahanglan namon ang usa ka npm script aron makadagan ang Webpack. Ablihi package.jsonug idugang ang startscript nga gipakita sa ubos (kinahanglan naa na nimo ang test script). Gamiton namo kini nga script aron masugdan ang among lokal nga Webpack dev server.
```
{
  // ...
  "scripts": {
    "start": "webpack serve --mode development",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  // ...
}
```
Ug sa katapusan, makasugod kita sa Webpack. Gikan sa my-projectfolder sa imong terminal, padagana ang bag-ong gidugang nga npm script:
```
npm start
```

Sa sunod ug kataposang seksyon niini nga giya, atong i-set up ang Webpack loaders ug i-import ang tanang CSS ug JavaScript sa Bootstrap.

Import nga Bootstrap

Ang pag-import sa Bootstrap sa Webpack nagkinahanglan sa mga loader nga among gi-install sa unang seksyon. Gi-install namon kini gamit ang npm, apan karon ang Webpack kinahanglan nga ma-configure aron magamit kini.

Ipahimutang ang mga loader sa webpack.config.js. Kompleto na ang imong configuration file ug kinahanglang motakdo sa snippet sa ubos. Ang bag-o lang nga bahin dinhi mao 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'
          }
        ]
      }
    ]
  }
}

Ania ang usa ka recap kung ngano nga kinahanglan namon kining tanan nga mga loader. style-loadernag-inject sa CSS ngadto sa usa ka <style>elemento sa <head>sa HTML nga panid, css-loadernagtabang sa paggamit @importug url(), postcss-loadergikinahanglan para sa Autoprefixer, ug sass-loadernagtugot kanamo sa paggamit sa Sass.

Karon, atong i-import ang Bootstrap's CSS. Idugang ang mosunod aron src/scss/styles.scssma-import ang tanan nga gigikanan sa Bootstrap nga Sass.
```
// Import all of Bootstrap's CSS
@import "~bootstrap/scss/bootstrap";
```
Mahimo usab nimo nga i-import ang among mga stylesheet nga tagsa-tagsa kung gusto nimo. Basaha ang among Sass import docs para sa mga detalye.
Sunod among gikarga ang CSS ug gi-import ang JavaScript sa Bootstrap. Idugang ang mosunod aron src/js/main.jsmakarga ang CSS ug i-import ang tanan nga JS sa Bootstrap. Ang Popper awtomatikong ma-import pinaagi sa Bootstrap.
```
// Import our custom CSS
import '../scss/styles.scss'

// Import all of Bootstrap's JS
import * as bootstrap from 'bootstrap'
```
Mahimo ka usab nga mag-import sa mga plugin sa JavaScript nga tagsa-tagsa kung gikinahanglan aron mapadayon ang mga gidak-on sa bundle:
```
import Alert from 'bootstrap/js/dist/alert'

// or, specify which plugins you need:
import { Tooltip, Toast, Popover } from 'bootstrap'
```
Basaha ang among JavaScript docs para sa dugang nga impormasyon kon unsaon paggamit ang Bootstrap's plugins.
Ug nahuman ka! 🎉 Uban sa tinubdan sa Bootstrap nga Sass ug JS nga bug-os nga na-load, ang imong lokal nga development server kinahanglan nga ingon niini karon.

Karon mahimo ka magsugod sa pagdugang bisan unsang mga sangkap sa Bootstrap nga gusto nimo gamiton. Siguruha nga susihon ang kompleto nga proyekto sa panig-ingnan sa Webpack kung giunsa paglakip ang dugang nga kostumbre nga Sass ug i-optimize ang imong pagtukod pinaagi sa pag-import lamang sa mga bahin sa CSS ug JS sa Bootstrap nga imong kinahanglan.

Mga pag-optimize sa produksiyon

Depende sa imong setup, mahimo nimong ipatuman ang pipila ka dugang nga seguridad ug mga speed optimization nga mapuslanon sa pagpadagan sa proyekto sa produksyon. Timan-i nga kini nga mga pag-optimize wala magamit sa proyekto sa panig-ingnan sa Webpack ug naa kanimo ang pagpatuman.

Pagkuha sa CSS

Ang style-loaderamong gi-configure sa ibabaw dali nga nagpagawas sa CSS sa bundle aron ang manual nga pagkarga sa usa ka file sa CSS dist/index.htmldili kinahanglan. Kini nga pamaagi mahimong dili molihok uban sa usa ka estrikto nga Content Security Policy, bisan pa, ug mahimo kini nga usa ka bottleneck sa imong aplikasyon tungod sa dako nga gidak-on sa bundle.

Aron mabulag ang CSS aron makarga namo kini direkta gikan sa dist/index.html, gamita ang mini-css-extract-loaderWebpack plugin.

Una, i-install ang plugin:

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

Unya instantiate ug gamita ang plugin sa Webpack configuration:

--- 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
           },
           {

Human sa pagdagan npm run buildpag-usab, adunay bag-ong file dist/main.css, nga maglangkob sa tanan nga CSS nga gi-import ni src/js/main.js. Kung imong tan-awon dist/index.htmlsa imong browser karon, ang istilo mawala, ingon nga kini karon sa dist/main.css. Mahimo nimong iapil ang nahimo nga CSS sa dist/index.htmlingon niini:

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

Pagkuha sa mga file sa SVG

Ang CSS sa Bootstrap naglakip sa daghang mga pakisayran sa mga file sa SVG pinaagi sa mga inline nga data:URI. Kung imong gitakda ang usa ka Patakaran sa Seguridad sa Kontento alang sa imong proyekto nga nagbabag sa mga data:URI alang sa mga imahe, nan kini nga mga file sa SVG dili makarga. Mahimo nimong masulbad kini nga problema pinaagi sa pagkuha sa mga inline nga SVG file gamit ang bahin sa mga module sa asset sa Webpack.

I-configure ang Webpack aron makuha ang mga inline nga SVG nga mga file sama niini:

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

Human sa pagdagan npm run buildpag-usab, imong makita ang mga SVG nga mga file nga gikuha dist/iconsug husto nga gi-refer gikan sa CSS.

Nakita ba nimo ang usa ka butang nga sayup o wala sa panahon dinhi? Palihug ablihi ang usa ka isyu sa GitHub . Nagkinahanglan ug tabang sa pag-troubleshoot? Pangitaa o pagsugod og diskusyon sa GitHub.