frontend-marketplace v1.2.1

React-Webpack-4-Babel-7-starter-boilerplate

Startup boilerplate of React16.x + Webpack 4 + Babel 7 (HMR enabled) + ESLint

How to start?

Installation

• Clone or download the repo.

  git clone https://github.com/varunalex/react-webpack-4-babel-7-starter-boilerplate.git

• Navigate to cloned folder and run

  npm install

Usage

• Start development server - build app continuously (HMR enabled) @ http://localhost:8080

  npm run start

• Pre-build - dist/ - Build app for production

  npm run prebuild

• Build - Build app once (HMR disabled) and serve @ http://localhost:3000

  npm run build

Basically if we write the word pre for a script, in this case prebuild, every time we run our command npm run build it will first execute npm run prebuild and then run the script npm run build

Notes :

• At config/webpack.prod.config.js: The optimization.splitChunks actually takes all of your common code and creates a vendor.bundle.js file. Currently this segment is commented. If you want to use splitChunks feel free to uncomment the code segment. For more : splitChunks

• Run prebuild after updating static assets and point source of the dist/ folder.

 <img alt="header" src="/dist/images/header.png"  className="app-header" />

• Eslint : You can use your favorite eslint rules set. By default airbnb eslint configurations has installed.

What's include?

• webpack

• webpack-cli

• webpack-dev-server

• webpack-merge: To divide our configuration into chunks, more on this later

• webpack-visualizer-plugin: To see a visual representation of each of our bundle size — how much space they are taking and what are their dependencies.

• style-loader: This adds CSS to the DOM by injecting a <script /> tag in the header

• sass-loader

• node-sass

• css-loader

• mini-css-extract-plugin: This plugin extracts CSS into separate files. It creates a CSS file per JS file which contains CSS.

• uglifyjs-webpack-plugin

• optimize-css-assets-webpack-plugin

• html-webpack-plugin: This does more then generate an HTML file, it supports on demand .css and .js files automatically added to your HTML files on demand

• copy-webpack-plugin

• babel-loader: This is the loader that helps webpack compile .js files

• @babel/core

• @babel/preset-react

• @babel/preset-env

• @babel/pollyfill: Babel includes a polyfill that includes a custom regenerator runtime and core-js. This will emulate a full ES2015+ environment. This means support for async/await type of cool syntax sugar.

• babel-eslint : You only need to use babel-eslint if you are using types (Flow) or experimental features not supported in ESLint itself yet. Otherwise try the default parser (you don't have to use it just because you are using Babel).
• eslint
• eslint-loader
• eslint-plugin-react : React specific linting rules for ESLint.
• eslint-config-airbnb-base
• eslint-plugin-import : ESLint plugin with rules that help validate proper imports
• eslint-plugin-jsx-a11y : Static AST checker for accessibility rules on JSX elements.

Contribute

Please contribute to the project if you know how to make it better, including this README :)