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
git clone https://github.com/altafino/react-webpack-5-tailwind-2.git cd react-webpack-5-tailwind-2 yarn / npm i
yarn start / npm start
You can view the development server at
(change port in ./config/webpack.dev.js)
yarn build / npm run build
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/plugin-proposal-class-properties- Use properties directly on a class (an example Babel config)
@babel/preset-env- Smart defaults for Babel
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-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.
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
Top comments (6)
I mistook WP as WordPress here
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