Giter Club home page Giter Club logo

webpack-bootstrap's Introduction

Webpack Bootstrap 4 template

Description

This project contains preconfigured Webpack 4 to work with the following tasks:

  • Compile SCSS to CSS
  • Optimize images (*.png, *.jpeg, *.gif)
  • Convert SVG into inline 'data:image' format
  • Fonts loader
  • Automatic copy static directory to the dist directory
  • Production optimization (styles, JavaScript, images)
  • Build source maps

Includes

  • Bootstrap 4 (SCSS, JS)
  • jQuery
  • Popper
  • Google Material Icons

Installation

  • Execute a command from the root directory
npm install
  • Use 'index.html' as home page
  • Write Your own JavaScript in the file: src/js/app.js
  • Also Your styles may be placed in the SCSS file: src/scss/app.scss
  • Then run the following command to build dev bundle:
npm run build
  • Good luck!

Project structure

  • src: Project sources root
    • img: Images and icons used in your styles
    • js: JavaScript code-base for your application
    • scss: Styles sources (may contain structure what you like)
    • static: Images and media-files which uses statically (will be copied to the dist directory), ex: uses in the HTML

Tasks

  • Build sources - npm run build
  • Start file watcher for recompiling - npm run watch
  • Start webpack dev server - npm run start
  • Build sources for production (with optimization) - npm run production
  • Clean 'dist' folder - npm run clear

webpack-bootstrap's People

Contributors

dependabot[bot] avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar

webpack-bootstrap's Issues

index.html hot-reload

Hi! I'm new to webpack, and at first I wanted to create my workplace by myself, but failed, so this repo was like water to me. It's just I could not figure out how to add the tea to the water ๐Ÿ˜ถ
I wanted to make the page reload when I edit the index.html too, and I failed again. Could you help with that?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.