Webpack 5 Max (JS/React/TS)

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

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