Sensible React boilerplate using Webpack 5, Babel, PostCSS and Sass with a hot dev server and an optimized production build.
Clone this repo and npm install.
npm i
npm start
You can view the development server at localhost:8080
.
npm run build
Note: Install http-server globally to deploy a simple server.
npm i -g http-server
You can view the deploy by creating a server in dist
.
cd dist && http-server
webpack
- Module and asset bundler.webpack-cli
- Command line interface for webpackwebpack-dev-server
- Development server for webpackwebpack-merge
- Simplify development/production configurationcross-env
- Cross platform configuration
react
- JavaScript library for building user interfaces.react-dom
- Package that provides DOM-specific methods.
@babel/core
- Transpile ES6+ to backwards compatible JavaScript -@babel/eslint-parser
- Allows you to lint ALL valid Babel code with the fantastic ESLint.@babel/plugin-proposal-class-properties
- Use properties directly on a class (an example Babel config)@babel/preset-env
- Smart defaults for Babel@babel/preset-react
- React defaults for Babel
eslint
- Reports patterns found in ECMAScript/JavaScript codeeslint-config-airbnb
- Airbnb JavaScript Style Guideeslint-import-resolver-webpack
- Webpack-literate module resolution plugin for eslint-plugin-importeslint-plugin-import
- Support linting of ES2015+ (ES6+) import/export syntaxeslint-plugin-jsx-a11y
- Static AST checker for accessibility rules on JSX elementseslint-plugin-react
- React specific linting rules for ESLinteslint-plugin-react-hooks
- Enforces the Rules of Hooks.
babel-loader
- Transpile files with Babel and webpacksass-loader
- Load SCSS and compile to CSSnode-sass
- Node Sasspostcss-loader
- Process CSS with PostCSSpostcss-preset-env
- Sensible defaults for PostCSScss-loader
- Resolve CSS importsstyle-loader
- Inject CSS into the DOM
clean-webpack-plugin
- Remove/clean build folderscopy-webpack-plugin
- Copy files to build directoryhtml-webpack-plugin
- Generate HTML files from templatemini-css-extract-plugin
- Extract CSS into separate filescss-minimizer-webpack-plugin
- Optimize and minimize CSS assets
This project is open source and available under the MIT License.