Why does webpack take 4 seconds to compile an empty react / redux project?

Question

I am concerned it is compiling my node_modules despite me asking to exclude it. How can I look and see what it is actually doing. The output in the console looks like gibberish. Is there a way to configure it to an output I can read.

This is a react/redux project. When I install react+ using npm install react react-redux react-dom, I assume this is in a readable form that webpack does not need to compile, hence the excluding of node_modules.

DEBUG: Webpack path:  /Users/c/top/framework/client
asset bundle.js 130 KiB [compared for emit] [minimized] (name: main) 2 related assets
orphan modules 55.3 KiB [orphan] 30 modules
cacheable modules 187 KiB
  modules by path ./node_modules/hoist-non-react-statics/ 5.36 KiB 3 modules
  modules by path ./node_modules/react/ 6.48 KiB 2 modules
  modules by path ./node_modules/react-dom/ 119 KiB 2 modules
  modules by path ./node_modules/scheduler/ 4.91 KiB
    ./node_modules/scheduler/index.js 198 bytes [built] [code generated]
    ./node_modules/scheduler/cjs/scheduler.production.min.js 4.72 KiB [built] [code generated]
  modules by path ./node_modules/react-is/ 2.48 KiB
    ./node_modules/react-is/index.js 196 bytes [built] [code generated]
    ./node_modules/react-is/cjs/react-is.production.min.js 2.29 KiB [built] [code generated]
  ./client/index.jsx + 20 modules 46.1 KiB [built] [code generated]
  ./node_modules/object-assign/index.js 2.06 KiB [built] [code generated]
webpack 5.69.0 compiled successfully in 3788 ms

Relevant part of config file

const input = `${ PATH_IN }/index.jsx`;


// babel-loader handles .js and .jsx files
const jsx = {
  include: PATH_IN,
  test: /\.jsx?/,
  exclude: /node_modules/,
  use: {
    loader: 'babel-loader',
    options: {
      presets: ['@babel/preset-env', '@babel/preset-react']
    }
  }
};

My project consists of a single file as follows: ( index.jsx )

import React        from 'react';
import ReactDOM     from 'react-dom';
import { Provider } from 'react-redux';

function App() {
  return null;
}

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

Answer 1

Your project is not actually empty. It has 3 dependencies, and webpack will build out the dependency graph starting at index.jsx. It will than build out the dependency graph for

• react
• react-dom
• react-redux

and each of their dependencies until all dependencies are packaged into a single file.