I published my first React Boilerplate with React 17, Tailwind 2, using babel, sass, with a hot dev server and an optimized production build.
Any feedback is welcome :-)
Looking for a React Job?
Checkout the React Jobs Board with OnSite and Remote React Jobs
Updated (newest first):
- added SVGR as a webpack loader to import your SVG directly as a React Component.
- added build-staging script. same as build but using .env.staging
- added dotenv-webpack to handle process.env.VARS
- added Prettier
- added react-refresh-webpack-plugin for HMR
- 2 PR's accepted
Installation
git clone https://github.com/altafino/react-webpack-5-tailwind-2.git
cd react-webpack-5-tailwind-2
yarn / npm i
Usage
Development server
yarn start / npm start
You can view the development server at localhost:3000
.
(change port in ./config/webpack.dev.js)
Production build
yarn build / npm run build
Features
Dependencies
webpack
-
webpack
- Module and asset bundler. -
webpack-cli
- Command line interface for webpack -
webpack-dev-server
- Development server for webpack -
webpack-merge
- Simplify development/production configuration -
cross-env
- Cross platform configuration
Babel
-
@babel/core
- Transpile ES6+ to backwards compatible JavaScript -
@babel/plugin-proposal-class-properties
- Use properties directly on a class (an example Babel config) -
@babel/preset-env
- Smart defaults for Babel
Loaders
-
babel-loader
- Transpile files with Babel and webpack -
sass-loader
- Load SCSS and compile to CSS -
node-sass
- Node Sass -
css-loader
- Resolve CSS imports -
postcss-loader
- Loader to process CSS with PostCSS -
style-loader
- Inject CSS into the DOM
Eslint
-
eslint-config-prettier
- Turns off all rules that are unnecessary or might conflict with Prettier. -
eslint-import-resolver-alias
- a simple Node behavior import resolution plugin for eslint-plugin-import, supporting module alias. -
eslint-plugin-babel
- an eslint rule plugin companion to babel-eslint. -
eslint-plugin-import
- This plugin intends to support linting of ES2015+ (ES6+) import/export syntax, and prevent issues with misspelling of file paths and import names. -
eslint-plugin-prettier
- Runs prettier as an eslint rule. -
eslint-plugin-react
- React specific linting rules for ESLint.
Plugins
-
clean-webpack-plugin
- Remove/clean build folders -
copy-webpack-plugin
- Copy files to build directory -
html-webpack-plugin
- Generate HTML files from template -
mini-css-extract-plugin
- Extract CSS into separate files -
optimize-css-assets-webpack-plugin
- Optimize and minimize CSS assets -
terser-webpack-plugin
- Optimize and minimize JavaScript
Top comments (6)
I mistook WP as WordPress here
Fixed ;-)
I thought that webpack 5 already comes with terser plugin so you don't have to add it to your project ;)
Got first PR which add Husky Lint Hook
cool stuff