piecioshka / boilerplate-webpack-babel

🍴 Starter with Webpack & Babel.js

boilerplate-webpack-babel

🍴 Starter with Webpack & Babel.js

Features

• ✅ Webpack
• ✅ Babel (Core)
• ✅ Support syntax ES2015+
• ✅ Static directory dist/
• ✅ 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)

Getting started

You can start in two ways:

Use Git

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 ...

Use Zip

1. Download package file: https://github.com/piecioshka/boilerplate-webpack-babel/archive/master.zip
2. Extract it to your project directory.

How to build an application?

npm run build               # Development mode
npm run build:development   # Development mode
npm run build:production    # Production mode

Open dist/ directory in browser by npm start.

How to develop an application?

npm run dev     # Use webpack-dev-server
npm run watch   # Use webpack -w

Open dist/ directory in browser by npm start.

Remove generated directory

npm run clear       # Remove only dist/
npm run clear:all   # Remove dist/ & node_modules/

🧪 Analysis of bundle file weight

If you would like to check how much a bundle file weight:

npm run build:development -- --env addons=bundleanalyzer
npm run build:production -- --env addons=bundleanalyzer

🧩 Webpack Addons

When would you like a modified Webpack configuration, please add a new "addon" to webpack/addons/ directory.

Each addon will be merge via webpack-merge.

See examples:

• webpack.bundleanalyzer.js

How to run addons?

npm run build:development -- --env addons=singleAddon
npm run build:production -- --env addons=firstAddon,secondAddon

License

The MIT License @ 2017-2022

boilerplate-webpack-babel's Issues

upgrade to latest webpack 5 possible

Hi can u plz update boilerplate to latest webpack etc. I am new to webpack

Invalid configuration error

Tried the repo today and at npm run build got:

Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration.output.path: The provided value "./public/dist" is not an absolute path!

MacBook Pro Sierra 10.12.3

Looks like this can be solved using __dirname instead of ./ on line 10 of webpack.config.js:

path: __dirname + '/public/dist'