Jak zahájit projekt webové aplikace pomocí Bootstrap s NPM & Webpack

Počáteční nastavení

Nejprve vytvořte složku, inicializujte npm, nainstalujte webpack lokálně a nainstalujte webpack-cli.

$ mkdir bootstrap-npm-webpack && cd bootstrap-npm-webpack
$ npm init -y
$ npm install webpack - save-dev
$ npm install webpack-cli - save-dev

Vytvořte následující strukturu složek pro váš projekt, zdrojový kód ve složce src a distribuovaný distribuční kód dist.

Nainstalujte Bootstrap

Nainstalujte Bootstrap s jeho vzájemnými závislostmi jQuery & Propper.JS

$ npm install bootstrap jquery popper.js --save

Pokud chcete importovat pluginy JavaScriptu Bootstrapu jednotlivě podle potřeby, měli byste také nainstalovat export-loader.

$ npm install export-loader - save-dev

Pro kompilaci a sdružování předkompilovaných souborů Sass Bootstrap byste měli nainstalovat požadované zavaděče a pluginy postcss.

$ npm install autoprefixer css-loader node-sass postcss-loader sass-loader style-loader --save-dev

Konfigurační soubor webového balíčku

Vytvořte konfigurační soubor webpacku webpack.config.js v kořenové složce projektu. Další informace o konfiguraci webpacku najdete zde.

webpack.config.js

const cesta = vyžadovat ('cesta');

module.exports = {
  položka: './src/app.js',
  výstup: {
    název souboru: 'bundle.js',
    path: path.resolve (__ dirname, 'dist')
  },
  modul: {
    pravidla: [
      {
        test: /\.(scss)$/,
        použití: [
          {
            // Přidá CSS do DOM vstřikováním značky „