Debugging Webpacker config

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

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')
Natalie Zeumann Over 5 years ago