Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/hashemkhalifa/webpack-js-boilerplate
Minimal JS boilerplate, build and run. using latest version of technologies like babel 7 webpack 4, prettier
https://github.com/hashemkhalifa/webpack-js-boilerplate
js-boilerplate webpack-boilerplate webpack-js
Last synced: 10 days ago
JSON representation
Minimal JS boilerplate, build and run. using latest version of technologies like babel 7 webpack 4, prettier
- Host: GitHub
- URL: https://github.com/hashemkhalifa/webpack-js-boilerplate
- Owner: HashemKhalifa
- License: mit
- Created: 2019-05-16T21:13:52.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2024-08-29T13:25:54.000Z (3 months ago)
- Last Synced: 2024-08-29T14:53:59.211Z (3 months ago)
- Topics: js-boilerplate, webpack-boilerplate, webpack-js
- Language: JavaScript
- Homepage:
- Size: 88.9 KB
- Stars: 3
- Watchers: 3
- Forks: 1
- Open Issues: 22
-
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 [email protected]: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)