Perfectly Simple Webpack 2 Setup

This post describes my perfectly simple Webpack 2 setup for SPA with webpack-dev-server, webpack-config-utils, html-webpack-plugin and copy-webpack-plugin.

This configuration is simple and easy to work with:

• start dev server with “npm start”
• build production version with “npm run build”
• use single webpack.config.js with ifDevelopment/ifProduction helpers
• generate index.html with html-webpack-plugin
• handle static assets like favicon.ico with copy-webpack-plugin

Build setup

We will start by creating new project:

mkdir client

cd client

npm init -y

Then we can add our scrips:

and install required packages.

React:

1npm i —-save react react-dom

Babel to compile React:

1npm i —-save-dev babel-loader babel-preset-es2015 babel-preset-react babel-preset-stage-0

CSS and SASS loaders:

1npm i —-save-dev style-loader css-loader sass-loader node-sass

and finally the webpack packages:

1npm i —-save-dev shx webpack webpack-config-utils webpack-dev-server html-webpack-plugin extract-text-webpack-plugin copy-webpack-plugin

Sample app src

Now we can add sample application:

And sample static asset:

mkdir assets

cd assets

curl -O https://facebook.github.io/react/favicon.ico

Webpack configuration

and finally webpack.config.js

Now we start “npm start”

or build production version with “npm run build”

Thats it! You have perfectly simple Webpack 2 setup too :-)

You can download complete starter setup in github repository.