Sådan starter du et webapp-projekt ved hjælp af Bootstrap med NPM & Webpack

Første opsætning

Lad os først oprette en mappe, initialisere npm, installere webpack lokalt og installere webpack-cli.

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

Opret følgende mappestruktur til dit projekt, din kildekode i src-mappe og bundtet distributionskode dist.

Installer Bootstrap

Installer Bootstrap med dens peer-afhængigheder jQuery & Propper.JS

$ npm installere bootstrap jquery popper.js - gem

Hvis du vil importere Bootstraps JavaScript-plugins individuelt efter behov, skal du også installere eksport-loader.

$ npm installere eksport-læsser - gemme-dev

Du skal installere de påkrævede indlæsere og postcss-plugins til at sammenstille og bundle Bootstrap-forkompilerede Sass-filer.

$ npm installer autoprefixer css-loader node-sass postcss-loader sass-loader stil-loader - Save-Dev

Webpack-konfigurationsfil

Opret en webpack-konfigurationsfil webpack.config.js i din projektrotmappe. Lær mere om webpakkekonfigurationen herfra.

webpack.config.js

const path = kræve ('sti');

module.exports = {
  post: './src/app.js',
  output: {
    filnavn: 'bundle.js',
    sti: path.resolve (__ dirname, 'dist')
  },
  modul: {
    regler: [
      {
        test: /\.(scss)$/,
        brug: [
          {
            // Tilføjer CSS til DOM ved at injicere et `