Repository files navigation

Minimal webpack boilerplate using latest version of babelclickwith real time server changes ;)

Project structure

Installation

Configuration

Technologies used

build/src/|- index.js _______________________________ # Application entry |- style.scss _____________________________ # Application style using css moduleswebpack|- paths.js ________________________________ # webpack paths needed|- webpack.common.js _______________________ # common webpack config|- webpack.dev.js __________________________ # development config|- webpack.prod.js _________________________ # production config

1- Clone the boilerplate repo

git clone git@github.com:HashemKhalifa/webpack-js-boilerplate.git

2-yarn ornpm install to install npm packages

3- start dev server usingyarn start ornpm start.

3- build and bundling your resources for productionyarn build.

4- Unit testing will watch all your changes in the test files as well as create coverage folder for you.yarn test

• Webpack Config paths based on your file structure you can go towebpack/paths.js and modify the source and file names based on your need.
• webpack/webpack.common.js config common webpack for both dev and production environments.
• webpack/webpack.dev.js config webpack for dev environment.
• webpack/webpack.prod.js config webpack for production environment.
• /webpack.config.js main webpack config that merge common and webpack environment based config.
• Prettier config/.prettierc.
• Browsers list config/.browserslistrc.

• Webpack 4
• Babel 7 [ transforming JSX and ES6,ES7,ES8 ]
• Jest [ Unit test]
• Eslint with airbnb config
• Prettier [ Code formatter ]
• Style &CSS Loader &SASS-loader
• CSS modules [ Isolated style based on each component ]
• Browsers list [ Share target browsers between different front-end tools, like Autoprefixer, Stylelint and babel-preset-env ]
• Webpack dev serve