Webpack console.log output?

Question

Can anyone direct me in the right direction?

So i've setup the webpack-dev-server with the truffle suite demo, just to get a basis on the foundation of my app. So my config file includes index.html & app.js, yet it try to display a console.log output to from app.js nothing shows via the console?

webpack.config.js

const path = require('path');
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports =
  {
  entry: './app/javascripts/app.js',
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'app.js',
  },
  plugins: [
    // Copy our app's index.html to the build folder.
    new CopyWebpackPlugin([
      { from: './app/index.html', to: "index.html" }
    ])
  ],
  module: {
    rules: [
      {
       test: /\.css$/,
       use: [ 'style-loader', 'css-loader' ]
      }
    ],
    loaders: [
      { test: /\.json$/, use: 'json-loader' },
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        loader: 'babel-loader',
        query: {
          presets: ['es2015'],
          plugins: ['transform-runtime']
        }
      }
    ]
  },
devServer: {
        compress: true,
        disableHostCheck: true,   // That solved .
        quiet: false,
        noInfo: false,
stats: {
  // Config for minimal console.log mess.
  colors: true,
  version: false,
  hash: false,
  timings: false,
  chunks: false,
  chunkModules: false

        }
 }
}

app.js

// Import libraries we need.
import { default as Web3} from 'web3';
import { default as contract } from 'truffle-contract'

// Import our contract artifacts and turn them into usable abstractions.
import metacoin_artifacts from '../../build/contracts/MetaCoin.json'
import dextre_artifacts from '../../build/contracts/Dextre.json'

console.log("starting!");

Output when running webpack

Project is running at http://localhost:8080/
webpack output is served from /
     Asset     Size  Chunks                    Chunk Names
    app.js  1.93 MB       0  [emitted]  [big]  main
index.html  19.8 kB          [emitted]         
webpack: Compiled successfully.

Where can view the "starting!" output, this is a real annoyance as i need to tackle errors. I've tried viewing at http://localhost:8080// and http://localhost:8080/webpack-dev-server//, but no luck.

It's fairly big, but it does include or are you regarding the web-pack.config file? — Samuel Gosling, Jan 18 '18 at 13:54
Even a in the html has no impact on displaying any sort of output. This is down to the webpack config file i personally believe. — Samuel Gosling, Jan 18 '18 at 14:01
Code written in `app.js` is not executed by webpack, it will parse the same and apply some transformations. Webpack provides some interface to its internals and that's how plugins work in webpack. Using this interface you can execute custom code(console.log in your case) while webpack is going through its parsing and compilation steps. https://github.com/webpack/docs/wiki/plugins — Arjun, Jan 20 '18 at 05:15
I can not understand why you expect your `app.js` works by `webpack`. you must use a different way. — AmerllicA, Apr 11 '18 at 05:22
add your console.log() in the webpack.config.js file and you'll see it in the terminal output — Derek, Apr 14 '19 at 05:50

score 3 · Answer 1 · answered Jul 17 '18 at 22:22

I had this same problem. As far as I can tell, the problem is that Webpack does not actually run the generated code on the server. The process that runs on the server simply checks for file changes and re-compiles when necessary. The code is actually all running on the client. So, the only way to view output from console.log() is to view the client browser's console.

Part of the confusion here is that while normally, node runs javascript on the server, in this case, node is delegating to a separate program entirely. You can run this whole thing without node installed at all, just using a standalone installation of the webpack executable. Node's execution environment is never used, thus you can't log to it.

score 2 · Answer 2 · answered Mar 02 '21 at 09:51

Since you are using webpack-dev-server the console.log is gonna be printed into the browser console. If you want to see console.log printed in your terminal you can add a console.log inside webpack.config file.

If you are not providing the webpack-dev-server a port your app should run on 80 so opening the browser there and opening the browser console and you should be able to see the "starting! log.

score 0 · Answer 3 · answered Apr 30 '23 at 05:32

Good Question, it depends on the optimizer and bundler engine you use.

TerserJS (mostly likely, newest, approach):

optimization: {
  minimizer: [
    new TerserPlugin({
      terserOptions: {
        compress: {
            drop_console: true
        }
      }
    })
  ]
}

Old approach uglifyJsPlugin:

// under plugins
            new webpack.optimize.UglifyJsPlugin({

                // Eliminate comments
                   comments: false,
           
               // Compression specific options
                  compress: {
                    // remove warnings
                       warnings: false,
           
                    // Drop console statements
                       drop_console: false
                  },
               }),

or uglify under optimization webpack v4:

const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
// load the plugin. its not part of webpack

optimization: {
  minimizer: [
    new UglifyJSPlugin({
      uglifyOptions: {
        compress: {
          drop_console: true,
        }
      }
    })
  ]
}

Webpack console.log output?

3 Answers3

Linked