https://github.com/uvacoder/webpack-js-boilerplate
https://github.com/uvacoder/webpack-js-boilerplate
boilerplate starter webpack
Last synced: about 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/uvacoder/webpack-js-boilerplate
- Owner: Uvacoder
- License: mit
- Created: 2021-08-15T18:52:18.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2021-08-15T18:52:28.000Z (almost 5 years ago)
- Last Synced: 2025-03-17T18:51:04.667Z (over 1 year ago)
- Topics: boilerplate, starter, webpack
- Language: JavaScript
- Homepage:
- Size: 87.9 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
## Webpack react minimal boilerplate
> Minimal webpack boilerplate using latest version of babel [click](#technologies-used)
> with real time server changes ;)
### Table of contents
[Project structure](#project-structure)
[Installation](#installation)
[Configuration](#configuration)
[Technologies used](#technologies-used)
### Project structure
````
build/
src/
|- index.js _______________________________ # Application entry
|- style.scss _____________________________ # Application style using css modules
webpack
|- paths.js ________________________________ # webpack paths needed
|- webpack.common.js _______________________ # common webpack config
|- webpack.dev.js __________________________ # development config
|- webpack.prod.js _________________________ # production config
````
### Installation
1- Clone the boilerplate repo
`git clone git@github.com:HashemKhalifa/webpack-js-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`.
4- Unit testing will watch all your changes in the test files as well as create coverage folder for you.
`yarn test`
### Configuration
* Webpack Config paths based on your file structure you can go to `webpack/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`.
#### Technologies used
* [Webpack 4](https://github.com/webpack/webpack)
* [Babel 7](https://github.com/babel/babel) [ transforming JSX and ES6,ES7,ES8 ]
* [Jest](https://github.com/facebook/jest) [ Unit test]
* [Eslint](https://github.com/eslint/eslint/) with airbnb config
* [Prettier](https://github.com/prettier/prettier) [ Code formatter ]
* [Style](https://github.com/webpack-contrib/style-loader) & [CSS Loader](https://github.com/webpack-contrib/css-loader) & [SASS-loader](https://github.com/webpack-contrib/sass-loader)
* [CSS modules](https://github.com/css-modules/css-modules) [ Isolated style based on each component ]
* [Browsers list](https://github.com/browserslist/browserslist) [ Share target browsers between different front-end tools, like Autoprefixer, Stylelint and babel-preset-env ]
* [Webpack dev serve](https://github.com/webpack/webpack-dev-server)