DEV Community

loading...
Cover image for React without create-react-app Webpack 5

React without create-react-app Webpack 5

rogeliosamuel621 profile image rogeliosamuel621 ・3 min read

We are going to create a react app with webpack 5.

Here is the code if you just want to copy and page here is the webpack config file and the babel config file

If you like to know why these modules, read dawn there.

Tutorial

We create our folder

mkdir webpack5
cd webpack5
npm init -y
Enter fullscreen mode Exit fullscreen mode

and we install the following modules

npm i react react-dom
Enter fullscreen mode Exit fullscreen mode
npm i @babel/core @babel/preset-env @babel/preset-react babel-loader clean-webpack-plugin css-loader file-loader html-webpack-plugin mini-css-extract-plugin react-hot-loader webpack webpack-cli webpack-dev-server --save-dev
Enter fullscreen mode Exit fullscreen mode
  • @babel/core @babel/preset-env @babel/preset-react Allows compile modern javascript
  • babel-loader Allows transpiling JavaScript files
  • clean-webpack-plugin Allows remove/clean your build folder
  • css-loader mini-css-extract-plugin Allows use CSS in our projects
  • file-loader Allows the use of images in our project
  • html-webpack-plugin Allows creating an index.html in our build folder
  • webpack webpack-cli webpack-dev-server We are using webpack so we need to use webpack modules xd. webpack-cli let us use webpack commands and webpack-dev-server let us create a server with webpack for mode development
  • react-hot-loader Allows update react components in real-time

After installing all dependencies we create webpack file and babel file

touch webpack.config.js .babelrc
Enter fullscreen mode Exit fullscreen mode

Now we create our template, this is our HTML file, which React is going to take to pint him in the DOM

mkdir public
cd public
touch index.html
Enter fullscreen mode Exit fullscreen mode

And then we create the basic HTML file structure

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <div id="root"></div>
        <!--this is the div that React is going to take-->
    </body>
</html>
Enter fullscreen mode Exit fullscreen mode

in webpack file we write this:

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const { HotModuleReplacementPlugin } = require("webpack");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");

module.exports = {
    //our index file
    entry: path.resolve(__dirname, "src/index.jsx"),
    //Where we put the production code
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "bundle.[contenthash].js",
        publicPath: "/",
    },
    // This says to webpack that we are in development mode and write the code in webpack file in different way
    mode: "development",
    module: {
        rules: [
            //Allows use javascript
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/, //don't test node_modules folder
                use: {
                    loader: "babel-loader",
                },
                resolve: {
                    extensions: [".js", ".jsx"],
                },
            },
            //Allows use of CSS
            {
                test: /\.css$/i,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader,
                    },
                    "css-loader",
                ],
            },
            //Allows use of images
            {
                test: /\.(png|jpg|svg)$/i,
                loader: "file-loader",
            },
        ],
    },
    plugins: [
        //Allows remove/clean the build folder
        new CleanWebpackPlugin(),
        //Allows update react components in real time
        new HotModuleReplacementPlugin(),
        //Allows to create an index.html in our build folder
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, "public/index.html"), //we put the file that we created in public folder
        }),
        //This get all our css and put in a unique file
        new MiniCssExtractPlugin({
            filename: "styles.[contentHash].css",
        }),
    ],
    //Config for webpack-dev-server module
    devServer: {
        historyApiFallback: true,
        contentBase: path.resolve(__dirname, "dist"),
        hot: true,
        port: 8000,
    },
};
Enter fullscreen mode Exit fullscreen mode

Now we write this in .babelrc

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}
Enter fullscreen mode Exit fullscreen mode

And finally, we write our commands

"scripts": {
    "dev": "webpack serve --open chrome",
    "build": "webpack --mode production",
    "start": "npm run dev"
},
Enter fullscreen mode Exit fullscreen mode

And that's it, we have the configuration.

Now the only thing that we are going to do is check if the configuration that we did works (it works) creating a simple hello world with react so you can stop reading or keep reading.

It works?

short answer: yes

long answer:

We create the folders and file (in the root folder) that we are going to use

mkdir src
cd src
touch index.jsx App.jsx styles.css
cd ..
Enter fullscreen mode Exit fullscreen mode

We write the next code

  • index.jsx
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

ReactDOM.render(<App />, document.getElementById("root"));

module.hot.accept();
Enter fullscreen mode Exit fullscreen mode
  • App.jsx
import React from "react";
import "./Styles.css";

const App = () => {
    return (
        <div>
            <h1>Hello world</h1>
        </div>
    );
};

export default App;
Enter fullscreen mode Exit fullscreen mode
  • Styles.css
body {
    background-color: black;
}
h1 {
    color: white;
}
Enter fullscreen mode Exit fullscreen mode

we run the command

npm run dev
Enter fullscreen mode Exit fullscreen mode

And we have this application

Bonus

If you want to add more functionalities to your react apps, here there are some modules that can help you.

  • dotenv-webpack, to use it you just need to require in webpack file and add it as a plugin.
//some code...
const Dotenv = require('dotenv-webpack');
//some code...

plugins: [
  //plugin...
  new Dotenv(),
  //plugin...
],
Enter fullscreen mode Exit fullscreen mode

Discussion (3)

pic
Editor guide
Collapse
denisstukalov profile image
denisstukalov

Very actual post, thank you!

Collapse
rogeliosamuel621 profile image
rogeliosamuel621 Author

Appreciate your comment, thanks! :)

Collapse
sooryapichai profile image
JAYASOORYA M R

Good one with HotModuleReplacementPlugin and latest es6 new features support plugins. Thank you!