Simple Webpack React Starter - ParcelJS Version

Creat-React-App is very easy to use. I want to know how they made it. So I npm eject and analysis webpack.config.js.

I Separated two config files webpack.dev.js and webpack.prod.js from it. Use one config file. Do This.

Creat-React-App is amazing. I learn a lot from it !!!

Some plugins are not installed . It's a little hard to config.

Such as: react-dev-utils ...

VS Code Plugin

Prettier - Code formatter

Eslint

Include

React 16.8.1

React-Dom 16.8.1

react-app-polyfill 0.2.1

Sass 1.17.0

Babel 7.X and Plugins:

@babel/core

@babel/preset-env

@babel/preset-react

@babel/plugin-proposal-class-properties

@babel/plugin-proposal-export-default-from

@babel/plugin-syntax-dynamic-import

BrowsersList

Eslint and Plugins:

eslint

babel-eslint

eslint-plugin-flowtype

eslint-plugin-import

eslint-plugin-jsx-a11y

eslint-plugin-react

eslint-config-react-app -Official Eslint Preset. Easy to use.

Webpack and Loader and Plugins:

webpack Page

webpack

webpack-cli

webpack-dev-server - Support HMR

webpack-manifest-plugin

Loaders Page

babel-loader

eslint-loader

style-loader

css-loader

sass-loader

url-loader

file-loader - Load SVG

@svgr/webpack -Load SVG

postcss-loader

postcss-flexbugs-fixes

postcss-preset-env

postcss-safe-parser

Plugins Page

terser-webpack-plugin

clean-webpack-plugin - Auto clean build folder.

html-webpack-plugin

mini-css-extract-plugin - Extract Css file

optimize-css-assets-webpack-plugin

case-sensitive-paths-webpack-plugin

Not Include

Jest

Download

git clone https://github.com/daimalou/simple-webpack-react-starter
cd simple-webpack-react-starter
yarn or npm i

Dev && Build

yarn start && yarn build
npm run start && npm run build

ScreenShot

Resources

Webpack Documentation

Babel Plugins

Configuring ESLint

babel-preset-react-app -Official Babel Preset - Issues#2377

splitChunks not working as expected

Webpack 4 splitChunks causes reused chunks to not be executed

License

MIT