Static Webpack Boilerplate :rocket:

Minimal & Modern Webpack Boilerplate for building static sites

Demo Site

Highlights

• Easy to use
• Includes optimized Webpack & Babel configuration
• Perfect Lighthouse score
• Non-blocking CSS & fonts loading
• Friendly errors & warnings
• Ensures clean code with xo & stylelint
• Normalizes default browser style with modern-normalize
• HTML template with social media meta tags
• Targets the latest browsers
• Works offline

File Tree

├── public                                      # Main folder
│   ├── css                                     # Subfolder with css
│   │   ├── main.css                            # Main CSS file
│   ├── fonts                                   # Subfolder with fonts
│   │   ├── open-sans-v16-latin-regular.woff    # .woff font
│   │   └── open-sans-v16-latin-regular.woff2   # .woff2 font
│   ├── images                                  # Subfolder with images
│   │   ├── favicon.png                         # Favicon
│   ├── js                                      # Subfolder with JavaScript
│   │   ├── main.js                             # Main (entry) file
│   └── index.html                              # HTML template
├── .npmrc                                      # npm config
├── .stylelintrc                                # stylelint config
├── .travis.yml                                 # Travis CI config
├── package.json                                # Package config with scripts, list of dependencies etc.
├── webpack.config.js                           # Webpack config
├── babel.config.js                             # Babel config

Usage

# Install dependencies

 $ npm install
 
# Start webpack-dev-server at port 8080

 $ npm start
 
# Run linters

 $ npm test
 
# Build app for production (gets output in the 'dist' directory)

 $ npm run build

Deploying

I recommend to use either Zeit Now or Netlify for hosting your site.

TODO

• HMR
• Testing

Related

• styled-react-boilerplate

License

MIT