Starter template for projects that use webpack 4 in pair with React, Bootstrap 4 and ES6 Javascript. This project contains configuration for development and production deploy using webpack 4 module bundler and tools which might be helpful
Make sure you install all dependencies first, run npm -i (shorthand for npm install)
npm i
To use configured development mode simply run
npm run start
To build all files for the production run
npm run build
An output is minified via --mode flag which is set to production (already minified, optimized bundle) - additionally /dist directory is removed each time you run this script to make sure there are no artifacts left in the output location
Optionally there is configured a task to export files with development mode (output is not minimized/optimized). To use it run
npm run dev
- React - create app components using Facebook's React Javascript UI library
- Bootstrap 4 - popular framework for building responsive, mobile-first sites
- Babel - transpile javascript ES6 code down to ES5
- Extract Text Plugin - extract styles to separate files
- SASS Loader - utilize modern SASS preprocessor to create styles for your app and compile them to .css
- Html Webpack Plugin - allows use of predefined HTML template (entry file: ./src/index.html)
- File Loader - allows use of media files in project via emitted URL
- Image Webpack Loader - compress source images in build with imagemin
- Webpack Dev Server - serves an app and opens a browser for development. Updates the browser on file changes.
- /src - here are all development files
- /dist - production output, imported libraries are bundled into separated vendor.[hash].js, while rest of components are in app.[hash].js (same for styles)
- eslint - Javascript linter - configuration in eslintrc.json file
- jshint - Javascript linter - configuration in .jshintrc file
This project is licensed under MIT license.