[React.js][Webpack] webpack setup for react from scratch

#webpack #react

npm install --save-dev @babel/core@^7.12.13 @babel/preset-env@^7.12.13 @babel/preset-react@^7.12.13 babel-loader@^8.2.2 css-loader@^5.0.1 file-loader@^6.2.0 mini-css-extract-plugin@^1.3.5 sass@^1.32.6 sass-loader@^10.1.1 style-loader@^2.0.0 webpack@^5.20.1 webpack-cli@^4.5.0 webpack-dev-server@^3.11.2

.barbelrc

{
    "presets": ["@babel/preset-env", "@babel/preset-react"]
}

webpack.config

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
    output: {
        path: path.join(__dirname, '/dist'),
        filename: 'index.bundle.js',
    },
    devServer: {
        port: 3010,
        watchContentBase: true,
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader'
                }
            },
            {
                test: /\.scss$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'sass-loader',
                ],
            }
        ]
    },
    plugins: [new MiniCssExtractPlugin()],
};

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>React App</title>
    <link rel="stylesheet" href="main.css">
</head>
<body>
    <div id="app"></div>
    <script src="index.bundle.js"></script>
</body>
</html>

index.js

require('file-loader?name=[name].[ext]!./index.html');
import React from 'react';
import ReactDOM from 'react-dom';
import { App } from './App';
import './App.scss';

const appElement = document.getElementById('app');

ReactDOM.render(<App />, appElement);

This site is built on Heroku

Join the ranks of developers at Salesforce, Airbase, DEV, and more who deploy their mission critical applications on Heroku. Sign up today and launch your first app!

Get Started