Как да стартирате проект за уеб приложение, използвайки Bootstrap с NPM & Webpack

Първоначалната настройка

Нека първо създадем папка, инициализираме npm, инсталираме локално webpack и инсталираме webpack-cli.

$ mkdir bootstrap-npm-webpack && cd bootstrap-npm-webpack
$ npm init -y
$ npm инсталирайте webpack --save-dev
$ npm инсталирайте webpack-cli --save-dev

Създайте следната структура на папки за вашия проект, вашия изходен код в src папка и пакетно разпространение код на разстояние

Инсталирайте Bootstrap

Инсталирайте Bootstrap с неговите връстници jQuery & Propper.JS

$ npm инсталирайте bootstrap jquery popper.js --save

Ако искате да импортирате JavaScript плъгини на Bootstrap индивидуално, ако е необходимо, трябва също така да инсталирате експортер-заредител.

$ npm инсталирайте експортер-товарач --save-dev

Трябва да инсталирате необходимите товарачи и плъгини postcss за компилиране и групиране на Bootstrap, предварително компилирани файлове Sass.

$ npm инсталирайте autoprefixer css-loader node-sass postcss-loader sass-loader стил-loader --save-dev

Файл за конфигурация на Webpack

Създайте конфигурационен файл за уебпакет webpack.config.js в основната папка на вашия проект. Научете повече за конфигурацията на уебпакета от тук.

webpack.config.js

const път = изисквам ('път');

module.exports = {
  запис: './src/app.js',
  изход: {
    име на файл: 'bundle.js',
    path: path.resolve (__ dirname, 'dist')
  }
  модул: {
    правила: [
      {
        тест: /\.(scss)$/,
        употреба: [
          {
            // Добавя CSS към DOM чрез инжектиране на маркер `