The github repo, react-webpack, has the minimal scaffolding for a React web app with Webpack 4. The tutorial explains how the project was built.

New project

Create a new project

yarn init

Install Webpack as devDependency.

yarn add webpack webpack-cli webpack-dev-server --dev

Create Webpack configuration file:

const path = require('path'); 
module.exports = {     
  entry: './src/index.js',     
  output: {         
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
Read More

Webpack build produces a bundle (app.js). The bundle contains scripts and styles. In this post, I will show how to analyze the bundle size.

Analyze bundle size

There is a command to produce build statistics in the form of JSON file.

webpack --profile --json > stats.json

There is an online analyse tool to analyze the build statistics. On uploading the JSON file, the analyse tool shows a dashboard.…

Read More

The article explains how to serve a Webpack bundle from a Koa server. Webpack is used for preparing client bundles composed of JavaScript, styles and assets. Koa is a node server, very similar to express. The article shows how to use webpack-dev-middleware in Koa request processing pipeline with the help of koa2-connect package.

The webpack-dev-middleware package provides the client bundle over a server endpoint.…

Read More

UPDATE (Jan 15, 2019):
A better article for Webpack v4 is published.

The article explains how to do a minimal scaffolding of React application using Webpack.

  1. Setup Git.
  2. Setup npm.
  3. Install packages.
  4. Setup babel.
  5. Setup Webpack.
  6. Define entry.
  7. Include bundle.
  8. Run application.

Setup Git

Setup a git repo as follows.

git init git remote add origin <remoteurl

Setting up a git repo is optional if you are only doing a demo.…

Read More