🍴 Starter with Webpack & Babel.js
- ✅ Webpack
- ✅ Babel (Core)
- ✅ Support syntax
ES2015+
- ✅ Distribution directory
dist/
- ✅ Directory with files as-is without changes
static/
(they will copied todist/static/
) - ✅ Development with
webpack-dev-server
- ✅ Hosting with
http-server
- ✅ Bundle file size analytics with
webpack-bundle-analyzer
- ✅ Two build strategies: dev (with source maps) & prod (compress file)
You can start in two ways:
mkdir PROJECT_NAME
cd $_ # Note: "$_" is the last argument of the previous command
git init # Note: branch "master" is created
git remote add boilerplate [email protected]:piecioshka/boilerplate-webpack-babel.git
git pull boilerplate master
git remote remove boilerplate
or ...
- Download package file: https://github.com/piecioshka/boilerplate-webpack-babel/archive/master.zip
- Extract it to your project directory.
npm run build # Development mode
npm run build:development # Development mode
npm run build:production # Production mode
TIP: Serve dist/
directory by npm start
npm run dev # Use webpack-dev-server
or
npm run watch # Use webpack -w
TIP: Serve dist/
directory by npm start
npm run clear # Remove only dist/
npm run clear:all # Remove dist/ & node_modules/
When would you like a modified Webpack configuration, please add a new "addon" to webpack/addons/ directory.
- webpack.bundleAnalyzer.js - Analysis of bundle file weight
- webpack.copyStatic.js - Copy directory
static/
todist/static/
(Enabled by default)
# Single addon
npm run dev -- --env addons=singleAddon
npm run build -- --env addons=singleAddon
npm run watch -- --env addons=singleAddon
npm run build:development -- --env addons=singleAddon
npm run build:production -- --env addons=singleAddon
## Multiple addons
npm run dev -- --env addons=firstAddon,secondAddon
The MIT License @ 2017-2024