Webpack 5 Max (JS/React/TS)

⚡ Webpack 5 Boilerplate for JS/React/TS apps.

🔗 Demo on CodeSandbox

Includes

• 5 config files with all possible settings
  • common
  • common + development
  • common + production
  • common + production + pwa
  • common + production + analyze
• React Todo App example
  • actions: add, complete, remove, edit, update
  • filters: all, active, completed
  • controls: mark all todos as completed, clear all completed todos
  • state management: useContext/useReducer
  • styling - react-bootstrap
  • type checking - prop-types
• HTML template with all meta & link tags for SEO
  • don't forget to change values in HtmlWebpackPlugin templateParameters object
• browserconfig.xml, robots.txt, sitemap.xml
• service-worker & manifest.json
  • don't forget to change values in manifest.json
• netlify.toml with all security headers

You can easily add settings for Vue or Angular components.

Vue

• install deps

yarn add -D vue-loader vue-template-compiler
# or
npm i -D yarn vue-loader vue-template-compiler

• add following to config/webpack/common.js

const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin()
  ]
}

Angular

• install dep

yarn add -D angular2-template-loader
# or
npm i -D angular2-template-loader

• change following in config/webpack/common.js

{
  test: /.tsx?$/i,
  exclude: /node_modules/,
  use: [babelLoader, 'ts-loader', 'angular2-template-loader?keepUrl=true']
},

Installation

# clone repo
git clone https://github.com/harryheman/Webpack5-Max.git

# install deps
yarn
# or
npm i

Usage

Development Server

yarn start
# or
npm start

Production Bundle

yarn build
# or
npm run build

Production Bundle PWA

yarn pwa
# or
npm run pwa

Production Bundle Analyzer

yarn analyze
# or
npm run analyze

Author

Igor Agapov

License

This project is open source and available under the MIT License