Holo i ka ʻike nui Holo i ka hoʻokele docs
Check
in English

Bootstrap a me Webpack

ʻO ke alakaʻi alakaʻi no ka hoʻopili ʻana a hoʻopili i ka Bootstrap's CSS a me JavaScript i kāu papahana me ka hoʻohana ʻana iā Webpack.

Ma kēia ʻaoʻao
Makemake ʻoe e lele i ka hopena? Hoʻoiho i ke kumu kumu a me ka demo hana no kēia alakaʻi mai ka waihona twbs/examples . Hiki iā ʻoe ke wehe i ka laʻana ma StackBlitz no ka hoʻoponopono ola.

Hoʻonoho

Ke kūkulu nei mākou i kahi papahana Webpack me Bootstrap mai ka wā ʻōpala, no laila aia kekahi mau mea e pono ai a ma mua o ka hiki ke hoʻomaka. Pono kēia alakaʻi iā ʻoe e hoʻokomo iā Node.js a me kahi kamaʻāina me ka terminal.

  1. E hana i kahi waihona papahana a hoʻonohonoho i ka npm. E hana mākou i ka my-projectwaihona a hoʻomaka i ka npm me ka -yhoʻopaʻapaʻa e pale aku i ka nīnau ʻana iā mākou i nā nīnau pili āpau.

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

  2. E hoʻouka Webpack. A laila pono mākou e hoʻokomo i kā mākou mau hilinaʻi hoʻomohala Webpack: webpackno ke kumu o Webpack, webpack-clino laila hiki iā mākou ke holo i nā kauoha Webpack mai ka pahu, a webpack-dev-serverno laila hiki iā mākou ke holo i kahi kikowaena hoʻomohala kūloko. Hoʻohana mākou --save-deve hōʻailona i kēia mau hilinaʻi no ka hoʻohana hoʻomohala wale ʻana a ʻaʻole no ka hana ʻana.

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

  3. E hoʻouka i ka Bootstrap. I kēia manawa hiki iā mākou ke hoʻokomo iā Bootstrap. E hoʻokomo pū mākou iā Popper mai ka hilinaʻi ʻana o kā mākou dropdowns, popovers, a me nā hāmeʻa no ko lākou kūlana. Inā ʻaʻole ʻoe e hoʻolālā i ka hoʻohana ʻana i kēlā mau ʻāpana, hiki iā ʻoe ke haʻalele iā Popper ma aneʻi.

    npm i --save bootstrap @popperjs/core

  4. E hoʻouka i nā mea hilinaʻi hou. Ma waho aʻe o Webpack a me Bootstrap, pono mākou i kekahi mau mea hilinaʻi e hoʻokomo pono a hoʻopili i kā Bootstrap's CSS a me JS me Webpack. Hoʻopili kēia me Sass, kekahi mau mea hoʻouka, a me Autoprefixer.

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

I kēia manawa ua hoʻokomo ʻia nā mea hilinaʻi a pau, hiki iā mākou ke hana i ka hana ʻana i nā faila papahana a lawe mai iā Bootstrap.

Papahana papahana

Ua hana mua mākou i ka my-projectwaihona a hoʻomaka i ka npm. I kēia manawa e hana pū mākou i kā mākou srca me distnā waihona e hoʻopuni i ke ʻano o ka papahana. E holo i kēia mai my-project, a i ʻole e hana lima i ka waihona a me ka hoʻolālā waihona i hōʻike ʻia ma lalo nei.

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

Ke pau ʻoe, pono kāu papahana piha e like me kēia:

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

I kēia manawa, aia nā mea āpau ma kahi kūpono, akā ʻaʻole e hana ʻo Webpack no ka mea ʻaʻole mākou i hoʻopiha i kā mākou webpack.config.js.

E hoʻonohonoho i ka Pūnaewele Pūnaewele

Me nā mea hilinaʻi i kau ʻia a mākaukau kā mākou waihona papahana no mākou e hoʻomaka i ka coding, hiki iā mākou ke hoʻonohonoho i ka Webpack a holo i kā mākou papahana ma ka ʻāina.

  1. E wehe webpack.config.jsi kāu hoʻoponopono. No ka mea he hakahaka, pono mākou e hoʻohui i kekahi config boilerplate iā ia i hiki iā mākou ke hoʻomaka i kā mākou kikowaena. Hōʻike kēia ʻāpana o ka config iā Webpack e ʻimi i kā mākou papahana JavaScript, kahi e hoʻopuka ai i ke code i hōʻuluʻulu ʻia i ( dist), a me ke ʻano o ke kikowaena hoʻomohala (huki mai ka distwaihona me ka hoʻouka wela).

    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. A laila hoʻopiha mākou i kā mākou dist/index.html. ʻO kēia ka ʻaoʻao HTML a Webpack e hoʻouka ai i ka polokalamu kele pūnaewele e hoʻohana i ka pūʻulu CSS a me JS a mākou e hoʻohui ai iā ia i nā pae hope. Ma mua o ka hiki iā mākou ke hana i kēlā, pono mākou e hāʻawi iā ia i mea e hāʻawi a hoʻokomo i ka outputJS mai ka pae mua.

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

    Ke hoʻokomo nei mākou i kahi mea liʻiliʻi o Bootstrap styling ma aneʻi me ka div class="container"a <button>no laila mākou e ʻike ai i ka wā e hoʻouka ʻia ai kā Bootstrap CSS e Webpack.

  3. I kēia manawa pono mākou i kahi palapala npm e holo i ka Webpack. E wehe package.jsona hoʻohui i ka startpalapala i hōʻike ʻia ma lalo nei (pono ʻoe e loaʻa i ka hōʻike hōʻike). E hoʻohana mākou i kēia ʻatikala e hoʻomaka i kā mākou kikowaena Webpack dev.

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

  4. A ʻo ka hope, hiki iā mākou ke hoʻomaka Webpack. Mai ka my-projectwaihona i kāu kikowaena, e holo i ka hōʻailona npm hou:

    npm start
    Ke holo nei ke kikowaena webpack dev

Ma ka ʻāpana aʻe a me ka hope o kēia alakaʻi, e hoʻonohonoho mākou i nā mea hoʻouka Webpack a lawe mai i nā CSS a me JavaScript a pau o Bootstrap.

Lawe mai i Bootstrap

ʻO ka lawe ʻana i ka Bootstrap i loko o Webpack e koi i nā mea hoʻoili a mākou i kau ai ma ka ʻāpana mua. Ua hoʻokomo mākou iā lākou me npm, akā i kēia manawa pono e hoʻonohonoho ʻia ʻo Webpack e hoʻohana iā lākou.

  1. E hoʻonohonoho i nā mea hoʻouka ma webpack.config.js. Ua hoʻopau ʻia kāu faila hoʻonohonoho a pono e kūlike me ka snippet ma lalo. ʻO ka ʻāpana hou wale nō ma ʻaneʻi ʻo ka moduleʻāpana.

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

    Eia kahi recap o ke kumu e pono ai mākou i kēia mau loader a pau. style-loaderhoʻokomo i ka CSS i loko o kahi <style>mea <head>o ka ʻaoʻao HTML, css-loaderkōkua me ka hoʻohana ʻana @importa url(), postcss-loaderkoi ʻia no Autoprefixer, a sass-loaderhiki iā mākou ke hoʻohana iā Sass.

  2. I kēia manawa, e hoʻokomo i kā Bootstrap CSS. E hoʻohui i kēia src/scss/styles.scsse hoʻokomo i nā kumu a pau o Bootstrap Sass.

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

    Hiki nō hoʻi iā ʻoe ke hoʻokomo i kā mākou stylesheets pākahi inā makemake ʻoe. E heluhelu i kā mākou Sass import docs no nā kikoʻī.

  3. A laila, hoʻouka mākou i ka CSS a lawe mai i ka JavaScript's Bootstrap. Hoʻohui i kēia src/js/main.jse hoʻouka i ka CSS a hoʻokomo i nā JS a pau o Bootstrap. E lawe ʻia mai ʻo Popper ma o Bootstrap.

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

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

    Hiki iā ʻoe ke hoʻokomo i nā plugins JavaScript i kēlā me kēia mea e pono ai e mālama i ka nui o ka pūpū:

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

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

    E heluhelu i kā mākou mau palapala JavaScript no ka ʻike hou aku e pili ana i ka hoʻohana ʻana i nā plugins Bootstrap.

  4. A ua pau ʻoe! 🎉 Me ke kumu o Bootstrap Sass a me JS i hoʻopiha piha ʻia, pono ke ʻano o kāu kikowaena hoʻomohala kūloko e like me kēia.

    E holo ana ke kikowaena webpack dev me Bootstrap

    I kēia manawa hiki iā ʻoe ke hoʻomaka e hoʻohui i nā ʻāpana Bootstrap āu e makemake ai e hoʻohana. E ʻoluʻolu e nānā i ka papahana hiʻohiʻona Webpack piha no ka hoʻokomo ʻana i nā Sass maʻamau a hoʻonui i kāu kūkulu ma ka lawe ʻana i nā ʻāpana o Bootstrap's CSS a me JS āu e pono ai.

Hoʻonui i ka hana

Ma muli o kāu hoʻonohonoho, makemake paha ʻoe e hoʻokō i kekahi mau palekana hou aʻe a me nā loiloi wikiwiki e pono ai no ka holo ʻana i ka papahana i ka hana. E hoʻomaopopo ʻaʻole i hoʻohana ʻia kēia mau loiloi ma ka papahana hoʻohālike Webpack a aia iā ʻoe e hoʻokō.

Wehe i CSS

ʻO ka style-loadermea a mākou i hoʻonohonoho ai ma luna nei e hoʻopuka maʻalahi i ka CSS i loko o ka pūʻolo no laila dist/index.htmlʻaʻole pono ka hoʻouka lima ʻana i kahi faila CSS. ʻAʻole hiki ke hoʻohana ʻia kēia ala me kahi Kulekele Palekana Koʻikoʻi, akā naʻe, hiki ke lilo i bottleneck i kāu noi ma muli o ka nui o ka pūpū.

No ka hoʻokaʻawale ʻana i ka CSS i hiki iā mākou ke hoʻouka pololei mai dist/index.html, e hoʻohana i ka mini-css-extract-loaderplugin Webpack.

ʻO ka mua, e hoʻokomo i ka plugin:

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

A laila hoʻomaka a hoʻohana i ka plugin i ka hoʻonohonoho 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
           },
           {

Ma hope o ka holo npm run buildhou ʻana, e loaʻa kahi faila hou dist/main.css, e loaʻa i nā CSS āpau i lawe ʻia e src/js/main.js. Inā ʻoe e nānā dist/index.htmli kāu polokalamu kele pūnaewele i kēia manawa, e nalowale ana ke ʻano, e like me ia i kēia manawa dist/main.css. Hiki iā ʻoe ke hoʻokomo i ka CSS i hana dist/index.htmlʻia e like me kēia:

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

Wehe i nā faila SVG

Loaʻa ka CSS o Bootstrap i nā kuhikuhi he nui i nā faila SVG ma o nā data:URI inline. Inā wehewehe ʻoe i kahi Kulekele Palekana Maʻiʻo no kāu papahana e ālai ana i nā data:URI no nā kiʻi, a laila ʻaʻole e hoʻouka ʻia kēia mau faila SVG. Hiki iā ʻoe ke hoʻopilikia i kēia pilikia ma ka unuhi ʻana i nā faila SVG inline me ka hoʻohana ʻana i ka hiʻohiʻona waiwai waiwai o Webpack.

E hoʻonohonoho i ka Webpack e unuhi i nā faila SVG e like me kēia:

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

Ma hope o ka holo npm run buildhou ʻana, e ʻike ʻoe i nā faila SVG i unuhi ʻia dist/iconsa kuhikuhi pono ʻia mai CSS.

E ʻike i kekahi mea hewa a i ʻole ka wā kahiko ma aneʻi? E ʻoluʻolu e wehe i kahi pilikia ma GitHub . Pono e kōkua i ka hoʻoponopono pilikia? Huli a hoʻomaka i kahi kūkākūkā ma GitHub.