ຂ້າມໄປຫາເນື້ອຫາຕົ້ນຕໍ ຂ້າມໄປຫາການນຳທາງເອກະສານ
Check
in English

Bootstrap & Webpack

ຄູ່ມືທີ່ເປັນທາງການສໍາລັບວິທີການລວມແລະມັດ CSS ແລະ JavaScript ຂອງ Bootstrap ໃນໂຄງການຂອງທ່ານໂດຍໃຊ້ Webpack.

ໃນໜ້ານີ້
ຕ້ອງ​ການ​ທີ່​ຈະ​ຂ້າມ​ໄປ​ທີ່​ສຸດ​? ດາວໂຫລດຊອດໂຄດ ແລະສາທິດການເຮັດວຽກສຳລັບຄູ່ມືນີ້ຈາກ ບ່ອນເກັບຂໍ້ມູນ tws/example . ນອກນັ້ນທ່ານຍັງສາມາດ ເປີດຕົວຢ່າງໃນ StackBlitz ສໍາລັບການແກ້ໄຂສົດ.

ຕັ້ງ​ຄ່າ

ພວກເຮົາກໍາລັງສ້າງໂຄງການ Webpack ດ້ວຍ Bootstrap ຕັ້ງແຕ່ເລີ່ມຕົ້ນ, ດັ່ງນັ້ນມີບາງເງື່ອນໄຂເບື້ອງຕົ້ນແລະຂັ້ນຕອນກ່ອນທີ່ພວກເຮົາຈະສາມາດເລີ່ມຕົ້ນໄດ້. ຄູ່ມືນີ້ຕ້ອງການໃຫ້ທ່ານຕິດຕັ້ງ Node.js ແລະຄວາມຄຸ້ນເຄີຍກັບເຄື່ອງໃຊ້ໄຟຟ້າ.

  1. ສ້າງໂຟນເດີໂຄງການແລະຕິດຕັ້ງ npm. ພວກເຮົາຈະສ້າງ my-projectໂຟນເດີແລະເລີ່ມຕົ້ນ npm ດ້ວຍການ -yໂຕ້ຖຽງເພື່ອຫຼີກເວັ້ນການຖາມພວກເຮົາຄໍາຖາມແບບໂຕ້ຕອບທັງຫມົດ.

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

  2. ຕິດຕັ້ງ Webpack. ຕໍ່ໄປ, ພວກເຮົາຈໍາເປັນຕ້ອງໄດ້ຕິດຕັ້ງການຂຶ້ນກັບການພັດທະນາ Webpack ຂອງພວກເຮົາ: webpackສໍາລັບຫຼັກຂອງ Webpack, webpack-cliດັ່ງນັ້ນພວກເຮົາສາມາດດໍາເນີນການຄໍາສັ່ງ Webpack ຈາກ terminal, ແລະ webpack-dev-serverດັ່ງນັ້ນພວກເຮົາສາມາດດໍາເນີນການເຄື່ອງແມ່ຂ່າຍການພັດທະນາທ້ອງຖິ່ນ. ພວກເຮົາໃຊ້ --save-devເພື່ອໃຫ້ສັນຍານວ່າຄວາມເພິ່ງພາອາໄສເຫຼົ່ານີ້ແມ່ນພຽງແຕ່ສໍາລັບການນໍາໃຊ້ການພັດທະນາແລະບໍ່ແມ່ນການຜະລິດ.

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

  3. ຕິດຕັ້ງ Bootstrap. ຕອນນີ້ພວກເຮົາສາມາດຕິດຕັ້ງ Bootstrap ໄດ້. ພວກເຮົາຍັງຈະຕິດຕັ້ງ Popper ນັບຕັ້ງແຕ່ dropdowns ຂອງພວກເຮົາ, popovers, ແລະຄໍາແນະນໍາເຄື່ອງມືແມ່ນຂຶ້ນກັບມັນສໍາລັບຕໍາແຫນ່ງຂອງເຂົາເຈົ້າ. ຖ້າທ່ານບໍ່ວາງແຜນທີ່ຈະໃຊ້ອົງປະກອບເຫຼົ່ານັ້ນ, ທ່ານສາມາດຍົກເລີກ Popper ຢູ່ທີ່ນີ້.

    npm i --save bootstrap @popperjs/core

  4. ຕິດຕັ້ງການເພິ່ງພາອາໄສເພີ່ມເຕີມ. ນອກເໜືອໄປຈາກ Webpack ແລະ Bootstrap, ພວກເຮົາຕ້ອງການຄວາມເພິ່ງພາອາໄສອີກໜ້ອຍໜຶ່ງເພື່ອນຳເຂົ້າ ແລະ ມັດ Bootstrap's CSS ແລະ JS ກັບ Webpack ຢ່າງຖືກຕ້ອງ. ເຫຼົ່ານີ້ລວມມີ Sass, ບາງ loaders, ແລະ Autoprefixer.

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

ຕອນນີ້ພວກເຮົາມີການຕິດຕັ້ງການເພິ່ງພາອາໄສທີ່ຈໍາເປັນທັງຫມົດ, ພວກເຮົາສາມາດເຮັດວຽກສ້າງໄຟລ໌ໂຄງການແລະນໍາເຂົ້າ Bootstrap.

ໂຄງ​ປະ​ກອບ​ການ​

ພວກເຮົາໄດ້ສ້າງ my-projectໂຟນເດີແລ້ວແລະເລີ່ມຕົ້ນ npm. ຕອນນີ້ພວກເຮົາຍັງຈະສ້າງ srcແລະ distໂຟນເດີ້ຂອງພວກເຮົາເພື່ອສະຫຼຸບໂຄງສ້າງໂຄງການ. ດໍາເນີນການຕໍ່ໄປນີ້ຈາກ my-project, ຫຼືສ້າງໂຟນເດີດ້ວຍຕົນເອງແລະໂຄງສ້າງໄຟລ໌ທີ່ສະແດງຂ້າງລຸ່ມນີ້.

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

ເມື່ອ​ທ່ານ​ສໍາ​ເລັດ​ການ​, ໂຄງ​ການ​ທີ່​ສົມ​ບູນ​ຂອງ​ທ່ານ​ຄວນ​ຈະ​ເປັນ​ດັ່ງ​ນີ້​:

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

ໃນຈຸດນີ້, ທຸກສິ່ງທຸກຢ່າງຢູ່ໃນສະຖານທີ່ທີ່ເຫມາະສົມ, ແຕ່ Webpack ຈະບໍ່ເຮັດວຽກເພາະວ່າພວກເຮົາຍັງບໍ່ໄດ້ຕື່ມຂໍ້ມູນໃສ່ຂອງພວກເຮົາ webpack.config.jsເທື່ອ.

ຕັ້ງຄ່າ Webpack

ດ້ວຍການຕິດຕັ້ງ dependencies ແລະໂຟນເດີ້ໂຄງການຂອງພວກເຮົາພ້ອມທີ່ຈະເລີ່ມຕົ້ນການຂຽນລະຫັດ, ພວກເຮົາສາມາດ configure Webpack ແລະດໍາເນີນການໂຄງການຂອງພວກເຮົາໃນທ້ອງຖິ່ນ.

  1. ເປີດ webpack.config.jsໃນບັນນາທິການຂອງທ່ານ. ເນື່ອງຈາກມັນຫວ່າງເປົ່າ, ພວກເຮົາຈະຕ້ອງເພີ່ມການຕັ້ງຄ່າ boilerplate ບາງຢ່າງໃສ່ມັນເພື່ອໃຫ້ພວກເຮົາສາມາດເລີ່ມຕົ້ນເຄື່ອງແມ່ຂ່າຍຂອງພວກເຮົາໄດ້. ພາກສ່ວນນີ້ຂອງ config ບອກ Webpack ເພື່ອຊອກຫາ JavaScript ຂອງໂຄງການຂອງພວກເຮົາ, ບ່ອນທີ່ຈະອອກລະຫັດທີ່ລວບລວມເປັນ ( dist), ແລະວິທີການທີ່ເຄື່ອງແມ່ຂ່າຍຂອງການພັດທະນາຄວນຈະປະຕິບັດ (ດຶງອອກຈາກ distໂຟນເດີທີ່ມີການໂຫຼດຮ້ອນ).

    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. ຕໍ່ໄປ, ພວກເຮົາຕື່ມຂໍ້ມູນໃສ່ຂອງພວກເຮົາ dist/index.html. ນີ້ແມ່ນຫນ້າ HTML Webpack ຈະໂຫລດໃນຕົວທ່ອງເວັບເພື່ອນໍາໃຊ້ CSS ທີ່ຖືກມັດໄວ້ແລະ JS ພວກເຮົາຈະເພີ່ມໃສ່ມັນໃນຂັ້ນຕອນຕໍ່ມາ. ກ່ອນທີ່ພວກເຮົາຈະເຮັດແນວນັ້ນ, ພວກເຮົາຕ້ອງໃຫ້ມັນບາງສິ່ງບາງຢ່າງທີ່ຈະສະແດງແລະລວມເອົາ outputJS ຈາກຂັ້ນຕອນທີ່ຜ່ານມາ.

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

    ພວກເຮົາກໍາລັງລວມເອົາຄໍເຕົ້າໄຂ່ທີ່ Bootstrap ເລັກນ້ອຍຢູ່ທີ່ນີ້ດ້ວຍ div class="container"ແລະ <button>ເພື່ອໃຫ້ພວກເຮົາເຫັນເວລາທີ່ CSS ຂອງ Bootstrap ຖືກໂຫລດໂດຍ Webpack.

  3. ໃນປັດຈຸບັນພວກເຮົາຕ້ອງການ npm script ເພື່ອດໍາເນີນການ Webpack. ເປີດ package.jsonແລະເພີ່ມສະ startຄິບທີ່ສະແດງຂ້າງລຸ່ມນີ້ (ທ່ານຄວນມີສະຄິບທົດສອບແລ້ວ). ພວກເຮົາຈະໃຊ້ສະຄຣິບນີ້ເພື່ອເລີ່ມຕົ້ນເຊີບເວີ Webpack dev ທ້ອງຖິ່ນຂອງພວກເຮົາ.

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

  4. ແລະສຸດທ້າຍ, ພວກເຮົາສາມາດເລີ່ມຕົ້ນ Webpack. ຈາກ my-projectໂຟນເດີໃນ terminal ຂອງທ່ານ, ດໍາເນີນການ npm script ທີ່ເພີ່ມໃຫມ່:

    npm start
    ເຊີບເວີ Webpack dev ແລ່ນ

ໃນພາກຕໍ່ໄປແລະສຸດທ້າຍຂອງຄໍາແນະນໍານີ້, ພວກເຮົາຈະຕັ້ງຄ່າ Webpack loaders ແລະນໍາເຂົ້າທັງຫມົດຂອງ CSS ແລະ JavaScript ຂອງ Bootstrap.

ນໍາເຂົ້າ Bootstrap

ການນໍາເຂົ້າ Bootstrap ເຂົ້າໄປໃນ Webpack ຕ້ອງການຕົວໂຫຼດທີ່ພວກເຮົາຕິດຕັ້ງຢູ່ໃນພາກທໍາອິດ. ພວກເຮົາໄດ້ຕິດຕັ້ງພວກມັນດ້ວຍ npm, ແຕ່ດຽວນີ້ Webpack ຕ້ອງໄດ້ຮັບການຕັ້ງຄ່າເພື່ອໃຊ້ພວກມັນ.

  1. ຕັ້ງຄ່າ loaders ໃນ webpack.config.js. ຕອນນີ້ໄຟລ໌ການຕັ້ງຄ່າຂອງທ່ານສຳເລັດແລ້ວ ແລະຄວນຈະກົງກັບສະນິບເພັດຂ້າງລຸ່ມນີ້. ສ່ວນໃຫມ່ພຽງແຕ່ນີ້ແມ່ນ moduleພາກ.

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

    ນີ້ແມ່ນບົດສະຫຼຸບວ່າເປັນຫຍັງພວກເຮົາຕ້ອງການເຄື່ອງຕັກເຫຼົ່ານີ້. style-loaderinjects CSS ເຂົ້າໄປໃນ <style>ອົງປະກອບໃນ <head>ຫນ້າ HTML, css-loaderຊ່ວຍໃນການນໍາໃຊ້ @importແລະ url(), postcss-loaderແມ່ນຕ້ອງການສໍາລັບ Autoprefixer, ແລະ sass-loaderອະນຸຍາດໃຫ້ພວກເຮົານໍາໃຊ້ Sass.

  2. ຕອນນີ້, ໃຫ້ນໍາເຂົ້າ CSS ຂອງ Bootstrap. ເພີ່ມສິ່ງຕໍ່ໄປນີ້ເພື່ອ src/scss/styles.scssນໍາເຂົ້າ Sass ແຫຼ່ງຂອງ Bootstrap ທັງໝົດ.

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

    ນອກນັ້ນທ່ານຍັງສາມາດນໍາເຂົ້າແຜ່ນສະໄຕລ໌ຂອງພວກເຮົາເປັນສ່ວນບຸກຄົນຖ້າຫາກວ່າທ່ານຕ້ອງການ. ອ່ານເອກະສານນໍາເຂົ້າ Sass ຂອງພວກເຮົາ ສໍາລັບລາຍລະອຽດ.

  3. ຕໍ່ໄປພວກເຮົາໂຫລດ CSS ແລະນໍາເຂົ້າ JavaScript ຂອງ Bootstrap. ເພີ່ມສິ່ງຕໍ່ໄປນີ້ເພື່ອ src/js/main.jsໂຫລດ CSS ແລະນໍາເຂົ້າ JS ຂອງ Bootstrap ທັງຫມົດ. Popper ຈະຖືກນໍາເຂົ້າໂດຍອັດຕະໂນມັດຜ່ານ Bootstrap.

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

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

    ນອກນັ້ນທ່ານຍັງສາມາດນໍາເຂົ້າ plugins JavaScript ສ່ວນບຸກຄົນຕາມຄວາມຕ້ອງການເພື່ອຮັກສາຂະຫນາດມັດລົງ:

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

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

    ອ່ານເອກະສານ JavaScript ຂອງພວກເຮົາ ສໍາລັບຂໍ້ມູນເພີ່ມເຕີມກ່ຽວກັບວິທີການໃຊ້ plugins ຂອງ Bootstrap.

  4. ແລະເຈົ້າສຳເລັດແລ້ວ! 🎉 ດ້ວຍແຫຼ່ງ Sass ແລະ JS ຂອງ Bootstrap ເຕັມທີ່, ເຊີບເວີການພັດທະນາທ້ອງຖິ່ນຂອງທ່ານຄວນຈະເປັນແບບນີ້.

    ເຊີບເວີ Webpack dev ແລ່ນດ້ວຍ Bootstrap

    ໃນປັດຈຸບັນທ່ານສາມາດເລີ່ມຕົ້ນການເພີ່ມອົງປະກອບ Bootstrap ໃດທີ່ທ່ານຕ້ອງການໃຊ້. ໃຫ້ແນ່ໃຈວ່າຈະ ກວດເບິ່ງໂຄງການຕົວຢ່າງ Webpack ທີ່ສົມບູນ ສໍາລັບວິທີການລວມເອົາ Sass ແບບກໍາຫນົດເອງເພີ່ມເຕີມແລະເພີ່ມປະສິດທິພາບການສ້າງຂອງທ່ານໂດຍການນໍາເຂົ້າພຽງແຕ່ສ່ວນຂອງ CSS ແລະ JS ຂອງ Bootstrap ທີ່ທ່ານຕ້ອງການ.

ການເພີ່ມປະສິດທິພາບການຜະລິດ

ອີງຕາມການຕິດຕັ້ງຂອງທ່ານ, ທ່ານອາດຈະຕ້ອງການປະຕິບັດການເພີ່ມປະສິດທິພາບຄວາມປອດໄພແລະຄວາມໄວເພີ່ມເຕີມບາງຢ່າງທີ່ເປັນປະໂຫຍດສໍາລັບການດໍາເນີນໂຄງການໃນການຜະລິດ. ໃຫ້ສັງເກດວ່າການເພີ່ມປະສິດທິພາບເຫຼົ່ານີ້ບໍ່ໄດ້ຖືກນໍາໃຊ້ໃນ ໂຄງການຕົວຢ່າງ Webpack ແລະຂຶ້ນກັບທ່ານທີ່ຈະປະຕິບັດ.

ສະກັດ CSS

ທີ່ style-loaderພວກເຮົາຕັ້ງຄ່າຂ້າງເທິງນີ້ສະດວກປ່ອຍ CSS ເຂົ້າໄປໃນມັດເພື່ອໃຫ້ການໂຫຼດໄຟລ໌ CSS ດ້ວຍຕົນເອງ dist/index.htmlບໍ່ຈໍາເປັນ. ວິທີການນີ້ອາດຈະບໍ່ເຮັດວຽກກັບນະໂຍບາຍຄວາມປອດໄພຂອງເນື້ອຫາທີ່ເຂັ້ມງວດ, ແນວໃດກໍ່ຕາມ, ແລະມັນອາດຈະກາຍເປັນຂໍ້ບົກຜ່ອງໃນຄໍາຮ້ອງສະຫມັກຂອງທ່ານເນື່ອງຈາກຂະຫນາດມັດໃຫຍ່.

ເພື່ອແຍກ CSS ເພື່ອໃຫ້ພວກເຮົາສາມາດໂຫລດໄດ້ໂດຍກົງ dist/index.html, ໃຫ້ໃຊ້ mini-css-extract-loaderWebpack plugin.

ກ່ອນອື່ນ ໝົດ, ຕິດຕັ້ງ plugin:

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

ຫຼັງຈາກນັ້ນ, instantiate ແລະນໍາໃຊ້ plugin ໃນການຕັ້ງຄ່າ 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
           },
           {

ຫຼັງ​ຈາກ​ການ​ແລ່ນ npm run build​ອີກ​ເທື່ອ​ຫນຶ່ງ​, ຈະ​ມີ​ໄຟລ​໌​ໃຫມ່ dist/main.css​, ເຊິ່ງ​ຈະ​ມີ​ທັງ​ຫມົດ​ຂອງ CSS ທີ່​ນໍາ​ເຂົ້າ​ໂດຍ src/js/main.js. ຖ້າທ່ານເບິ່ງ dist/index.htmlຢູ່ໃນຕົວທ່ອງເວັບຂອງທ່ານຕອນນີ້, ຮູບແບບຈະຫາຍໄປ, ຍ້ອນວ່າມັນຢູ່ໃນ dist/main.css. ທ່ານສາມາດລວມເອົາ CSS ທີ່ສ້າງຂຶ້ນໃນ dist/index.htmlແບບນີ້:

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

ສະກັດໄຟລ໌ SVG

CSS ຂອງ Bootstrap ລວມມີການອ້າງອີງຫຼາຍອັນຕໍ່ກັບໄຟລ໌ SVG ຜ່ານ data:URIs ໃນແຖວ. ຖ້າທ່ານກໍານົດນະໂຍບາຍຄວາມປອດໄພເນື້ອຫາສໍາລັບໂຄງການຂອງທ່ານທີ່ບລັອກ data:URIs ສໍາລັບຮູບພາບ, ຫຼັງຈາກນັ້ນໄຟລ໌ SVG ເຫຼົ່ານີ້ຈະບໍ່ໂຫລດ. ທ່ານສາມາດແກ້ໄຂບັນຫານີ້ໄດ້ໂດຍການສະກັດໄຟລ໌ SVG ໃນແຖວໂດຍໃຊ້ຄຸນສົມບັດໂມດູນຊັບສິນຂອງ Webpack.

ຕັ້ງຄ່າ Webpack ເພື່ອສະກັດໄຟລ໌ SVG ໃນແຖວເຊັ່ນນີ້:

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

ຫຼັງ​ຈາກ​ການ​ແລ່ນ npm run build​ອີກ​ເທື່ອ​ຫນຶ່ງ​, ທ່ານ​ຈະ​ພົບ​ເຫັນ​ໄຟລ​໌ SVG ທີ່​ຖືກ​ແຍກ​ອອກ​ເປັນ dist/icons​ແລະ​ຖືກ​ອ້າງ​ອີງ​ຈາກ CSS ຢ່າງ​ຖືກ​ຕ້ອງ​.

ເຫັນບາງຢ່າງຜິດພາດ ຫຼືເກົ່າຢູ່ບ່ອນນີ້ບໍ? ກະລຸນາ ເປີດບັນຫາໃນ GitHub . ຕ້ອງການຄວາມຊ່ວຍເຫຼືອໃນການແກ້ໄຂບັນຫາບໍ? ຊອກຫາ ຫຼືເລີ່ມການສົນທະນາ ໃນ GitHub.