Read more

Debugging Webpacker config

Natalie Zeumann
July 09, 2018Software engineer at makandra GmbH

Option 1: JSON dump

In config/webpack/environment.js you can get inspect environment which includes all webpack config options set for the current environment:

const { environment } = require('@rails/webpacker')
const webpack = require('webpack')

throw JSON.stringify(environment, null, 2)

...

Option 2: Browser console

Illustration online protection

Rails professionals since 2007

Our laser focus on a single technology has made us a leader in this space. Need help?

  • We build a solid first version of your product
  • We train your development team
  • We rescue your project in trouble
Read more Show archive.org snapshot

You can also debug the config in your browser directly with a newer version of Webpacker:

process.env.NODE_ENV = process.env.NODE_ENV || 'development'

const environment = require('./environment')
const webpackConfig = environment.toWebpackConfig()

debugger

module.exports = webpackConfig
  1. Run bin/webpack --debug-webpacker (see here Show archive.org snapshot )
  2. Go to chrome://inspect
  3. Follow "inspect" in the "Remote Target" section
  4. A new browser will open with a breakpoint at "process.exitCode = 0;" and you can press "Resume script execution" to jump to the your set breakpoint

Image
Image

Option 3: Node console

$ RAILS_ENV=development node

const config = require('./config/webpack/development')

Option 4: Printing warnings

const process = require('process')
const { environment } = require('@rails/webpacker')
const webpack = require('webpack')

process.emitWarning('Some warning')
Posted by Natalie Zeumann to makandra dev (2018-07-09 15:57)