Minimal Webpack / React project

README.md

Minimal Webpack project with React.js

This is a minimal config for React.js that allows code spliting, hot reloading dev server and build capabilities.

Project structure

src/index.html
src/main.js
.babelrc
package.json
webpack.config.js

Dependencies

yarn add react react-dom yarn add -D webpack webpack-dev-server webpack-cli @babel/core @babel/preset-env @babel/preset-react babel-loader html-webpack-plugin

Package.json Scripts

{
    "build": "webpack --mode production",
    "start": "webpack-dev-server --mode development"
}

.babelrc

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

webpack.config.js

const path = require('path');
const HTMLWebpackPlugin = require('html-webpack-plugin');

const SRC_PATH = path.resolve(__dirname, 'src');
const DIST_PATH = path.resolve(__dirname, 'dist');

module.exports = {
  context: __dirname,
  entry: path.join(__dirname, "src", "main.js"),
  output: {
    path: DIST_PATH,
    filename: "bundle.js",
  },
  module: {
    rules: [
      {
        test: /.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        },
        include: SRC_PATH,
      }
    ]
  },
  devServer: {
    contentBase: DIST_PATH,
    compress: true,
    port: 8080,
  },
  plugins: [
    new HTMLWebpackPlugin({
      inject: 'body',
      template: path.resolve(SRC_PATH, 'index.html'),
    })
  ]
};

src/main.js

import React from 'react';
import ReactDOM from 'react-dom';

function App() {
  return <div>Hello World!<div/>;
}

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);