Minimal webpack and react boilerplate using latest version of react and babel as well as jest and enzyme for more details about technologies used. click with real time server changes ;)
check out Medium article for more details
build/
src/
|- index.jsx _______________________________ # Application entry
|- App.jsx _________________________________ # Application init
| |- Components/
| |- hello-world/
| |- index.jsx _______________________ # Sample component
webpack
|- 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-react-boilerplate.git
2- yarn or npm install to install npm packages
3- start dev server using yarn start or npm start.
3- build and bundling your resources for production yarn build or npm run build.
4- run the production build from dist folder yarn prod or np run prod.
5- beauify code using yarn format or npm run format
/webpack.config.jsmain webpack config that merge common and webpack environment based config.- Prettier config
/.prettierc. - Husky and Browsers list config object in
/.package.json.
- Webpack 5
- Babel 7 [ transforming JSX and ES6,ES7,ES8 ]
- React
17.0.2 - Formik [ for handling forms ]
- React-Bootstrap [ UI framework ]
- 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 ]
- Husky
- Webpack dev serve