Webpack boilerplate

Starter kit for modern web app (React, Bootstrap, jQuery) and bundle logic with Webpack for development (with hot reloading) and for production

Made by Paul Musso

Features

• Output 2 js files, one for app code and other one for dependencies (jQuery, ...)
• SourceMaps for JS, JSX and LESS
• Ressources (fonts and images) lesser than 100Kb are inlined in JS files
• Files generated by Webpack are injected to index.html
• 2 configurations
  • Development (npm run start)
    • Source Maps are inlined in JS files
    • Hot reloading for CSS and React, update changed files without refreshing web app
    • CSS are injected in JS files (for hot reloading)
  • Production (npm run serve or npm run build)
    • Styles exported to a CSS file
    • CSS and JS files are minimized
    • Source Maps are exported to dedicated files
• Use ESLint: check JS syntax at packaging time
• React
  • Enable hot reloading for html (really fast)
• Bootstrap
  • App styles use Less Bootstrap files, useful to change vars like primary color
  • JS files are included in js file for dependencies, like React and JQuery
• JQuery
  • Included in JS file for dependencies
  • It is exposed in global scope as jQuery
• Less (CSS preprocessor)
• Tests with Karma Jasmine PhantomJS

Getting started

Ensure you have node greater than version 4 (Code contains es6 syntax)

Installation

1. Get repo with git clone https://github.com/paulmusso/webpack-boilerplate.git

2. Delete the existing git repository by running rm -rf .git

3. Run npm install to install the dependencies

Development server (with hot reload)

npm start

Go to http://localhost:8080 and you should see the app running!

Build for production

npm run build

Output files are copied to dist folder

Serve production files

npm run serve

Run tests

npm test

License

This project is licensed under the MIT license