Webpack jedhamuun beekama

Webpack fayyadamuun akkaataa Bootstrap pirojektii kee keessatti hammachuu dandeessu baradhu.

Bootstrap fe'uu

Bootstrap akka moojuulii Node.js npm fayyadamuun fe'i.

JaavaScript galchuu

Sarara kana bakka seensaa appii keetii irratti dabaluudhaan JavaScript Bootstrap galchi (yeroo baay'ee index.jsykn app.js):

import 'bootstrap';

Akka filannootti, akka barbaachisummaa isaatti dhuunfaan plugins galchuu dandeessa :

import 'bootstrap/js/dist/util';
import 'bootstrap/js/dist/alert';
...

Bootstrap jQuery fi Popper irratti hundaa'a , isaanis qabeentaa keessatti ibsaman peerDependencies; package.jsonkana jechuun lamaan isaanii fayyadama kee irratti dabaluu kee mirkaneeffachuu qabda jechuudha npm install --save jquery popper.js.

Akkaataawwan Galchuu

Sass Dursee Qindaa'e Galchuu

Dandeettii guutuu Bootstrap fayyadamuu fi akka fedhii keessaniitti dhuunfachuuf, faayiloota madda akka qaama adeemsa bundling pirojektii keessaniitti fayyadami.

Jalqaba, kan kee uumi fi jijjiiramoota amala ijaaraman_custom.scss irra darbuuf itti fayyadami . Sana booda, jijjiiramoota amala kee galchuuf faayilii Sass kee isa guddaa fayyadami, itti aansuudhaan Bootstrap:

@import "custom";
@import "~bootstrap/scss/bootstrap";

Bootstrap akka qindeessuuf, fe'itoota barbaachisoo ta'an fe'uu fi fayyadamuu kee mirkaneessi: sass-loader , postcss-loader with Autoprefixer . Saagi xiqqaadhaan, qindeessii webpack kee seera kana ykn kan kana fakkaatu of keessatti qabachuu qaba:

...
{
  test: /\.(scss)$/,
  use: [{
    loader: 'style-loader', // inject CSS to page
  }, {
    loader: 'css-loader', // translates CSS into CommonJS modules
  }, {
    loader: 'postcss-loader', // Run postcss actions
    options: {
      plugins: function () { // postcss plugins, can be exported to postcss.config.js
        return [
          require('autoprefixer')
        ];
      }
    }
  }, {
    loader: 'sass-loader' // compiles Sass to CSS
  }]
},
...

CSS Qindaa'e Galchuu

Akka filannootti, sarara kana bakka seensaa pirojektii keetii salphaatti dabaluudhaan CSS fayyadamuuf qophaa'e Bootstrap fayyadamuu dandeessa:

import 'bootstrap/dist/css/bootstrap.min.css';

Haala kana keessatti cssfooyya'iinsa addaa tokko malee qindeessaa webpack irratti seera kee isa jiru fayyadamuu dandeessa, style-loader fi css-loadersass-loader qofa si hin barbaachisu malee .

...
module: {
  rules: [
    {
      test: /\.css$/,
      use: ['style-loader', 'css-loader']
    }
  ]
}
...