Fa'ase'e ile anotusi autu Fa'ase'e ile su'ega fa'amatalaga
Check
in English

Bootstrap & Webpack

Le ta'iala aloa'ia pe fa'afefea ona fa'aofi ma fa'apipi'i le Bootstrap's CSS ma le JavaScript i lau poloketi e fa'aaoga ai le Webpack.

I luga o lenei itulau
E te manaʻo e faaseʻe i le iuga? La'u mai le code source ma le demo galue mo lenei ta'iala mai le twbs/examples repository . E mafai foi ona e tatalaina le faʻataʻitaʻiga i StackBlitz mo le faʻataʻitaʻiga ola.

Seti

O loʻo matou fausiaina se poloketi Webpack ma Bootstrap mai le amataga, o lea e iai ni mea e manaʻomia muamua ma luma laʻasaga aʻo leʻi mafai ona tatou amata. O lenei taʻiala e manaʻomia oe e faʻapipiʻi Node.js ma faʻamasani i le laina.

  1. Fausia se faila poloketi ma seti npm. Matou te fatuina le my-projectfaila ma amata le npm ma le -yfinauga e aloese ai mai le fesili mai ia i matou uma fesili fegalegaleai.

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

  2. Fa'apipi'i Webpack. O le isi mea e manaʻomia ona faʻapipiʻi a matou faʻalagolago i le atinaʻeina o le Webpack: webpackmo le autu o le Webpack, webpack-cliina ia mafai ona matou faʻatautaia poloaiga Webpack mai le laina, ma webpack-dev-serveria mafai ai ona matou faʻatautaia se faʻaumau atinaʻe i le lotoifale. Matou te faʻaaogaina --save-deve faʻamaonia ai o nei faʻalagolago e naʻo le faʻaogaina o le atinaʻe ae le o le gaosiga.

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

  3. Fa'apipi'i le Bootstrap. O lea e mafai ona matou faʻapipiʻi Bootstrap. Matou te faʻapipiʻi foi Popper talu ai o matou pa'ū, popovers, ma meafaigaluega e faʻalagolago i ai mo latou tulaga. Afai e te le fuafua i le faʻaaogaina o na vaega, e mafai ona e aveese Popper iinei.

    npm i --save bootstrap @popperjs/core

  4. Fa'apipi'i isi fa'alagolago. E le gata i le Webpack ma le Bootstrap, matou te manaʻomia ni nai faʻalagolago e faʻapipiʻi lelei ma faʻapipiʻi Bootstrap's CSS ma JS ma Webpack. E aofia ai Sass, nisi o uta, ma Autoprefixer.

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

I le taimi nei ua uma ona faʻapipiʻiina mea faʻalagolago, e mafai ona matou galulue i le fausiaina o faila faila ma le faʻaulufaleina mai o Bootstrap.

Fa'atulagaina o le poloketi

Ua uma ona matou fatuina le my-projectfaila ma amataina npm. O lea o le a matou faia foi a matou srcma distfaila e faʻataʻamilo ai le fausaga o le poloketi. Fa'agasolo mea nei mai le my-project, po'o le faia ma le lima le faila ma le faila faila o lo'o fa'aalia i lalo.

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

A mae'a, e tatau ona fa'apenei lau galuega atoa:

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

I le taimi nei, o mea uma o loʻo i le nofoaga saʻo, ae o le Webpack o le a le aoga ona e leʻi faʻatumu a matou webpack.config.js.

Fa'atulaga Webpack

Faatasi ai ma faʻalagolago ua faʻapipiʻiina ma ua saunia le matou faila o le poloketi mo matou e amata ai le coding, ua mafai nei ona matou faʻaogaina le Webpack ma faʻatautaia la matou poloketi i le lotoifale.

  1. Tatala webpack.config.jsi lau faatonu. Talu ai e avanoa, e mana'omia le fa'aopoopoina o se fa'apalapala fa'apipi'i i ai ina ia mafai ai ona amata la matou 'au'aunaga. O lenei vaega o le config e taʻu mai i le Webpack e suʻe le JavaScript a le matou poloketi, o fea e tuʻuina atu ai le code tuʻufaʻatasia i le ( dist), ma pe faʻafefea ona amio le server atinaʻe (toso mai le distpusa ma toe uta vevela).

    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. Ona sosoo ai lea ma le faatumuina o la matou dist/index.html. Ole itulau HTML lea ole Webpack ole a uta ile su'esu'ega e fa'aoga ai le CSS ma le JS fa'apipi'i matou te fa'aopoopo i ai i la'asaga mulimuli ane. Ae tatou te leʻi faia lena mea, e tatau ona tatou tuʻuina atu i ai se mea e tuʻuina atu ma aofia ai le outputJS mai le laasaga muamua.

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

    O loʻo matou faʻapipiʻiina sina sitaili Bootstrap iinei ma le div class="container"ma <button>ina ia matou vaʻai pe a utaina le CSS Bootstrap e Webpack.

  3. O lea matou te manaʻomia se npm script e taʻavale Webpack. Tatala package.jsonma faʻaopopo le startfaʻamatalaga o loʻo faʻaalia i lalo (e tatau ona i ai lau suʻega suʻega). O le a matou fa'aogaina le tusitusiga lea e amata ai le matou Webpack dev server.

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

  4. Ma le mea mulimuli, e mafai ona tatou amata Webpack. Mai le my-projectfaʻailoga i lau faʻailoga, faʻataʻitaʻi le tusi fou fou npm:

    npm start
    Webpack dev server o loʻo taʻavale

I le isi vaega mulimuli ma le vaega mulimuli i lenei taʻiala, matou te setiina le Webpack loaders ma faʻaulufale uma mai le CSS ma le JavaScript a Bootstrap.

Fa'aulufale mai Bootstrap

O le fa'aulufaleina mai o Bootstrap i totonu o le Webpack e mana'omia ai loaders na matou fa'apipi'iina i le vaega muamua. Ua matou faʻapipiʻiina i latou i le npm, ae o lea ua manaʻomia ona faʻapipiʻi le Webpack e faʻaoga ai.

  1. Seti loaders i webpack.config.js. Ua mae'a nei lau faila fa'atulagaina ma e tatau ona fetaui ma le snippet o lo'o i lalo. Pau lava le vaega fou iinei o le modulevaega.

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

    Ole fa'amatalaga lea ole mafua'aga tatou te mana'omia uma ai nei loaders. style-loadertui le CSS i se <style>elemene i le <head>itulau HTML, css-loaderfesoasoani i le faʻaaogaina @importma url(), postcss-loadere manaʻomia mo Autoprefixer, ma sass-loaderfaʻatagaina tatou e faʻaoga Sass.

  2. Ia, tatou fa'aulufale mai le Bootstrap's CSS. Fa'aopoopo mea nei i src/scss/styles.scssle fa'aulufale uma mai o le puna a Bootstrap Sass.

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

    E mafai fo'i ona e fa'aulufale mai a matou sitaili ta'itasi pe a e mana'o ai. Faitau a matou pepa fa'aulufale mai Sass mo fa'amatalaga.

  3. O le isi matou utaina le CSS ma fa'aulufale mai le Bootstrap's JavaScript. Fa'aopoopo mea nei i src/js/main.jsle utaina o le CSS ma fa'aulufale uma mai le Bootstrap's JS. Popper o le a otometi lava ona faaulufale mai e ala i Bootstrap.

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

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

    E mafai fo'i ona e fa'aulufale mai fa'apipi'i JavaScript ta'ito'atasi pe a mana'omia e fa'atumauina i lalo le lapo'a:

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

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

    Faitau a matou JavaScript docs mo nisi faʻamatalaga ile faʻaogaina o plugini a Bootstrap.

  4. Ma ua uma oe! 🎉 Faatasi ai ma le puna a Bootstrap Sass ma JS ua uma ona utaina, ua tatau nei ona foliga faʻapea lau 'auʻaunaga atinaʻe i le lotoifale.

    Webpack dev server o loʻo faʻaogaina ma Bootstrap

    Ole taimi nei e mafai ona e amata fa'aopoopo so'o se vaega Bootstrap e te mana'o e fa'aoga. Ia mautinoa e siaki le poloketi faʻataʻitaʻiga Webpack atoa mo auala e faʻapipiʻi ai Sass masani faʻapitoa ma faʻalelei lau faufale e ala i le faʻaulufaleina mai na o vaega ole Bootstrap's CSS ma JS e te manaʻomia.

Fa'atonuga o gaosiga

Faʻalagolago i lau seti, atonu e te manaʻo e faʻatino nisi puipuiga faaopoopo ma faʻavavevave optimizations aoga mo le faʻatinoina o le poloketi i le gaosiga. Manatua e le fa'aogaina nei fa'ata'ita'iga ile poloketi fa'ata'ita'iga Webpack ma e pule lava oe e fa'atino.

Aveese le CSS

O le style-loadermea na matou faʻatulagaina i luga e faigofie ona tuʻuina atu le CSS i totonu o le fusi ina ia le manaʻomia le utaina ma le lima o se faila CSS dist/index.html. O lenei faiga atonu e le aoga i se Faiga Faʻavae Saogalemu Faʻatonu, peitaʻi, ma e ono avea ma faʻalavelave i lau talosaga ona o le tele o fusi.

Ina ia tuueseese le CSS ina ia mafai ona matou uta saʻo mai le dist/index.html, faʻaaoga le mini-css-extract-loaderWebpack plugin.

Muamua, faʻapipiʻi le plugin:

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

Ona vave faʻaoga ma faʻaoga le plugin i le 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
           },
           {

A maeʻa ona npm run buildtoe taʻavale, o le ai ai se faila fou dist/main.css, lea o le a aofia uma ai le CSS na faʻaulufale mai e src/js/main.js. Afai e te vaʻai dist/index.htmli lau suʻega i le taimi nei, o le a misi le sitaili, e pei ona i ai nei i le dist/main.css. E mafai ona e faʻaofiina le CSS faʻatupuina i le dist/index.htmlpei o lenei:

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

Aveese faila SVG

O le CSS a Bootstrap e aofia ai le tele o faʻamatalaga i faila SVG e ala i data:URI laina. Afai e te faʻamatalaina se Faiga Faʻavae Puipuiga mo lau poloketi e poloka ai data:URI mo ata, o le a le utaina nei faila SVG. E mafai ona e foia lenei faʻafitauli e ala i le suʻeina o faila SVG i totonu e faʻaaoga ai le faʻaogaina o aseta a le Webpack.

Fa'atulaga le Webpack e aveese mai ai faila SVG i totonu e pei o lenei:

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

A uma ona npm run buildtoe tamo'e, o le ae mauaina faila SVG ua aumai i totonu dist/iconsma fa'asino sa'o mai le CSS.

Va'ai i se mea sese pe tuai iinei? Faamolemole tatala se mataupu ile GitHub . Manaomia se fesoasoani e foia ai faafitauli? Su'e pe amata se talanoaga ile GitHub.