Setting up a minimal Webpack 4 with react

This is my basic setup to get started for react using webpack 4.

1. First initialize your app. In a new folder run:
$ npm init -y

2. Install your dependencies.

Start with your core modules.
$ npm i -D webpack html-loader file-loader clean-webpack-plugin html-webpack-plugin webpack-dev-server

Also React
$ npm i -S react react-dom

Finally Babel for react and webpack
$ npm i -D babel-loader babel-core babel-preset-env babel-preset-react

I also install Sass dependencies
$ npm i -D sass-loader node-sass css-loader style-loader extract-text-webpack-plugin

Optionally Bootstrap and GSAP
$ npm i -S bootstrap jquery popper.js
$ npm i -D postcss-loader precss
$ npm i -S gsap

3. Create your .babel.rc with the following content

    "presets": [

4. Include this start script in your package.json

"scripts": {
    "start": "webpack-dev-server",
    "build": "webpack -p"

5. Create a basic app:


    import React from 'react';
    import ReactDOM from 'react-dom';
    import './main.scss';
    import App from './component/App';

    ReactDOM.render(<App />, document.getElementById('main'))


@import "~bootstrap/dist/css/bootstrap";


import React, { Component } from 'react';
import { TweenMax } from 'gsap';
import 'bootstrap';
import './App.scss';
class App extends Component {
    constructor(props) {
    render() {
        return (
            <div className="app">
                <div className="card">
                    <div className="card-body">
                        <h1>Webpack Template 2</h1>
export default App;


body {
    background: grey;


<!DOCTYPE html>
<html lang="en">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Webpack template</title>
    <div id="main">
        <h1>Webpack template</h1>

That’s it!

Just npm start.

Author: mark

Creative technologist

Leave a Reply

Your email address will not be published. Required fields are marked *