How to display console.logs using Webpack build? - reactjs

Question

I'm using Webpack to build a React app. I'm trying to use console.log to debug but they don't show up in the browser console or in the terminal. It doesn't seem to like there's too much on this (The only other question I've found on this is here: Webpack console.log output?)
webpack.config.js
const path = require('path');
const webpack = require('webpack');
module.exports = {
entry: './src/App.tsx',
mode: 'development',
module: {
rules: [
{
test: /\.(|ts|tsx|js|jsx)$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: [
'#babel/preset-env',
'#babel/preset-react',
'#babel/preset-typescript',
],
plugins: [
'#babel/plugin-proposal-class-properties',
],
},
},
},
{
test: /\.(css|scss)$/,
use: ['style-loader', 'css-loader'],
},
{
test: /\.(jpe?g|gif|png|svg)$/i,
loader: 'url-loader',
options: {
limit: 25000,
esModule: false,
},
},
],
},
resolve: { extensions: ['.ts', '.tsx', '.js', '.jsx'] },
output: {
path: path.resolve(__dirname, 'dist/'),
publicPath: '/dist/',
filename: 'bundle.js',
},
devServer: {
contentBase: path.join(__dirname, 'public/'),
port: 3000,
publicPath: 'http://localhost:3000/dist/',
hot: true,
},
plugins: [new webpack.HotModuleReplacementPlugin()],
};
App.tsx
import React from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
console.log('test1') // this gets logged
render(<Hello />, document.querySelector('#main'));
Hello.tsx
import React, { RefObject } from 'react';
interface Props { }
interface State { }
console.log('test2') // this gets logged
export default class Hello extends React.Component<Props, State> {
private start() {
console.log('test3') // this doesn't get logged
}
constructor(p: Props) {
super(p);
this.start();
console.log('test4') // this gets logged
}
}
Any insights are appreciated!