Checkout demo site.
- 3x lighter than
create-react-app
- CSS module enabled
- Babel && PostCSS && SASS preinstalled
- Hot module replacement during local development
- SEO optimized(Just Kidding...), don't forget to edit
src/index.html
- Node.js v16+
- Optionally VS Code
- Optionally React Developer Tools and Reactime browser extensions
Generate a new project from this template and clone it.
$ git clone https://github.com/NazmusSayad/react-redux-pwa-boilerplate-webpack
$ cd react-redux-minimal-pwa-boilerplate
-
Initialize your project with some details
$ npm init
-
Install dependencies and save the versions
$ npm install --save
-
Remove
<InitialApp />
from src/App.jsx and write your own code. [Don't forget to delete src/#InitialApp folder (:] -
Launches the app in development mode on
http://localhost:80
$ npm start
-
Compiles and bundles the app for deployment
$ npm run build
-
For basic configurations config.js
module.exports = { build: __dirname + '/../build', publicDir: __dirname + '/../public', mainJS: __dirname + '/../src/index.js', template: __dirname + '/../src/index.html', publicPath: '/', assestPath: 'static', cssRegex: /\.(c|sc|sa)ss$/i, cssModuleRegex: /\.module\.\w+$/i, }
-
Change assest types from webpack.common.js
loaders: [ { test: /\.(htm|html)$/i, loader: 'html-loader', }, { type: 'asset/resource', resourceQuery: /file/i, }, { type: 'asset/source', resourceQuery: /raw/i, }, { type: 'asset/inline', resourceQuery: /url/i, }, { test: /\.svg$/i, issuer: /\.[jt]sx?$/i, use: ['@svgr/webpack'], }, ]
-
To change CSS module regex add
cssModuleRegex
property inside the default export object config.js// cssModuleRegex: /\.module\.\w+$/i,
-
Configure development server from webpack.dev.js
devServer: { host: 'localhost', port: 80, hot: true, compress: false, historyApiFallback: true, client: { logging: 'none', overlay: false, progress: false, }, }
-
Read from Webpack Docs if you want more customization.
npm update --save
--- Update npm modules (dependencies)
Made with ♥ by Nazmus Sayad.