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

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);

Blog

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

Reene

Join Our Newsletter. No Spam, Only the good stuff.

Related