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": [
        "env",
        "react"
    ]
}

4. Include this start script in your package.json

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

5. Create a basic app:

main.js

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

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

main.css

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

component/App.cs

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

component.App.scss

body {
    background: grey;
}

index.html

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

That’s it!

Just npm start.


Author: mark

Creative technologist

Leave a Reply

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