Webpack jedhamuun beekama

Webpack 3 fayyadamuun akkaataa Bootstrap pirojektii kee keessatti hammachuu dandeessan baradhu.

Bootstrap fe'uu

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

JaavaScript galchuu

Sarara kana bakka seensaa appii keetii irratti dabaluudhaan JaavaScript 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 hirkata , kunniin akka , kana jechuun isaan lamaan fayyadama peerDependencieskee irratti dabaluu mirkaneessuu qabda jechuudha .package.jsonnpm 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 post css actions
      options: {
        plugins: function () { // post css plugins, can be exported to postcss.config.js
          return [
            require('precss'),
            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']
      }
    ]
  }
  ...