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.