How to display console.logs using Webpack build?

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!

How to display console.logs using Webpack build?

0 Answers0