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.

Matronna

where's your index.html? – Tamar

It's fairly big, but it does include <script src="./app.js"></script> or are you regarding the web-pack.config file? – Matronna

please provide a minimal reproducible example of it. – Tamar

It has no relevance to the question at hand though? – Matronna

Even a <script> console.log("hello"); </script> in the html has no impact on displaying any sort of output. This is down to the webpack config file i personally believe. – Matronna

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. github.com/webpack/docs/wiki/plugins – Calefactory

I can not understand why you expect your app.js works by webpack. you must use a different way. – Redtop

add your console.log() in the webpack.config.js file and you'll see it in the terminal output – Nonnah

Answer 1

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.

Remains

Answer 2

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.

Revolving

Answer 3

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,
        }
      }
    })
  ]
}

Unbecoming