All Projects → johndatserakis → modern-webpack-starter

johndatserakis / modern-webpack-starter

Licence: MIT license
🏰 A modern JavaScript starter using Webpack 4. Made in a simple way - good for learning or starting a new project without having to rollout cli-auto-builders.

Programming Languages

javascript
184084 projects - #8 most used programming language
HTML
75241 projects

Projects that are alternatives of or similar to modern-webpack-starter

Koa Vue Notes Project
🤓 A single repo containing both the koa-vue-notes-api and koa-vue-notes-web projects.
Stars: ✭ 14 (-66.67%)
Mutual labels:  spa, starter
aurelia-typescript-webpack-starter
A minimal Aurelia starter kit written in TypeScript and built using webpack.
Stars: ✭ 28 (-33.33%)
Mutual labels:  starter, webpack-dev-server
vue-auth-boilerplate
This is a simple Vue template/starter kit, scaffolded on vue-cli 3, with full Auth functions to Login & Register
Stars: ✭ 77 (+83.33%)
Mutual labels:  spa, starter
Webpack Starter Basic
A simple webpack starter project for your basic modern web development needs.
Stars: ✭ 552 (+1214.29%)
Mutual labels:  spa, starter
example-app
Example app showcasing fulls1z3's Angular libraries
Stars: ✭ 27 (-35.71%)
Mutual labels:  spa, starter
gridsome-starter-resume
💾 Gridsome starter resume with bootstrap
Stars: ✭ 17 (-59.52%)
Mutual labels:  starter
vue-seo-friendly-spa-template
Vue.js PWA/SPA template initially scaffolded with vue-cli and configured for SEO. Makes use of prerendering and other techniques/packages in order to achieve a perfect "Lighthouse Score".
Stars: ✭ 41 (-2.38%)
Mutual labels:  spa
bce.design
minimal magic, minimal tooling, essential dependencies, high productivity, no transpilations and no migrations. The Web Components starter ships with integrated lit-html, redux-toolkit and vaadin router components.
Stars: ✭ 67 (+59.52%)
Mutual labels:  spa
ngx-echarts-starter
A starter demo project for ngx-echarts
Stars: ✭ 29 (-30.95%)
Mutual labels:  starter
laravel-vue-starter
Well Documented Laravel Starter App From Development to Production. For Full Blown RESTFUL API and SPA with Beautiful UI Using Buefy / ElementUi For Reusable Vue Components
Stars: ✭ 80 (+90.48%)
Mutual labels:  spa
botfuel-sample-starter
Starter bot using Botfuel Dialog
Stars: ✭ 24 (-42.86%)
Mutual labels:  starter
gatsby-starter-glass
A Minimal & Beautiful Gatsby Personal Blog Starter With Nice Glassmorphism UI
Stars: ✭ 134 (+219.05%)
Mutual labels:  starter
Laravel-Vue-SPA-template
Template for Single Page Applications built with Laravel and Vue.
Stars: ✭ 22 (-47.62%)
Mutual labels:  spa
angular-spa-demo
Demo code for a Single Page Application using AngularJS
Stars: ✭ 20 (-52.38%)
Mutual labels:  spa
three-typescript-starter
Three.js + Typescript + Webpack Boilerplate
Stars: ✭ 105 (+150%)
Mutual labels:  starter
graphql-compose-elasticsearch
Graphql App using Node with typescript, KOA framework and Elasticsearch
Stars: ✭ 40 (-4.76%)
Mutual labels:  starter
laravel-vue
VueJS SPA example using Sanctum & Fortify authentication with Laravel.
Stars: ✭ 102 (+142.86%)
Mutual labels:  spa
vue-patternfly
PatternFly 3 components for Vue 3
Stars: ✭ 50 (+19.05%)
Mutual labels:  spa
Angular-Reactive-Demo-Shop
Angular Demo Shop
Stars: ✭ 79 (+88.1%)
Mutual labels:  spa
angular2-webpack-advance-starter
An advanced Angular2 Webpack Starter project with support for ngrx/store, ngrx/effects, ng2-translate, angulartics2, lodash, NativeScript (*native* mobile), Electron (Mac, Windows and Linux desktop) and more.
Stars: ✭ 49 (+16.67%)
Mutual labels:  starter

Issues Tweet

modern-webpack-starter

A modern JavaScript starter using Webpack 4. Made in a simple way - good for learning or starting a new project without having to rollout cli-auto-builders. You can view the demo here.

Looking to use Vue with this template? See here for the Vue repo flavor.

Features

  • Webpack 4.14.0
  • Webpack-Dev-Server
  • Bootstrap 4.1
  • Babel
  • SASS Handling
  • Uglifying, Minimizing
  • html-webpack-plugin, mini-css-extract-plugin, optimize-css-assets-webpack-plugin
  • @ Alias Support For Easy File Imports
  • ESLint
  • And more...

Installing / Getting started

# install dependencies
npm install

# serve using webpack-dev-server with hot reload at http://localhost:8080/
npm run watch

# build for production
npm run build

General Information

Note - Now updated to Webpack 4!

My goal with this project was to make a simple Webpack starter template for use in modern-day development projects. While it is a good thing that a lot of the popular frameworks bundle their own CLI's to help scaffold projects, I felt I was losing something in translation - especially when it came to Webpack and the project initialization.

I've used Grunt in the past - and have been using Gulp for many years now, and while Gulp and Grunt have been awesome, I believe the concepts Webpack introduces are critical and must be utilized in my projects going forward. I especially liked how Webpack coordinates everything for you - no more including code in the wrong order.

An issue I've had is finding a repository or tutorial that doesn't go too far - as I find it can be harmful when you are given too much - or too little - when learning.

So this project stops right before you would add a framework of your choosing. I've emulated a simple async/await promise call just to show that babel is working correctly.

In the end, I am an even bigger fan of Webpack now then when I started - although if I plan to use a framework in my application with 100% certainty - I may continue to choose the framework's chosen CLI tool when scaffolding with Webpack. Depends on the circumstances of course. I do really like vue-cli. It's just that sometimes I've found myself with the need to set it up myself - so this was a great learning experience, and hopefully it helps you.

Hit Me Up

Go ahead and fork the project! Message me here if you have questions or submit an issue if needed. I'll be making touch-ups as time goes on. Have fun with this!

License

Copywrite 2017 John Datserakis

MIT

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].