[wp|5] Debugging Webpack Setting

_________________________

Download code here to follow this lesson.
Navigation: [ < Previous ][ Table of Content ][ Next > ]
_________________________________________________

Passing environment settings into webpack.config

We have seen so far that webpack expects a configuration object from webpack.config.js:

// file: webpack.config.js
module.export = {
    entry: ... ,
    output: ...
    ...
}

Starting with Webpack 2, webpack.config.js can export a function:

// webpack.config.js
module.export = (env) => {
    // more code here to do stuff
    return {
        entry: ...
        output: ...
    };
}

When you run webpack or webpack-dev-server with an --env flag like so:

node_modules/.bin/webpack --env.mySetting 
node_modules/.bin/webpack-dev-server --env.mySetting

The exported function will be called with an argument env where a property with name mySetting be available with its value set to boolean true.

// webpack.config.js
module.export = (env) => {
    if (env && env.mySetting) console.log(env.mySetting) // true
return {
        entry: ...
        output: ...
    };
}

Let’s edit our webpack.config.js and package.json to take advantage of this new feature:

// webpack.config.js
const pathResolve = require('path').resolve;
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ProgressBarPlugin = require('progress-bar-webpack-plugin');
const webpackDevServer_host = '0.0.0.0';
const webpackDevServer_port = 8080;
const absolutePath_sourceFolder = pathResolve('src');
const absolutePath_buildFolder = pathResolve('dist');
const config_fn = env => {   //<---------------------- [*]
    const config = {
        devServer: {
            host: webpackDevServer_host,
            port: webpackDevServer_port
        },
        context: absolutePath_sourceFolder,
        entry: './main.js',
        output: {
            filename: 'bundle.js',
            path: absolutePath_buildFolder,
            publicPath: '/',
        },
        plugins: [
            new HtmlWebpackPlugin({
                template: './index.template.html',
                favicon: './favicon.ico'
            }),
            new ProgressBarPlugin()
        ],
    };
    if (env && env.debug) {   //<---------------------- [*]
        echoSettings();
        console.log('wepack.config: ', config);
    }
    return config;
}
module.exports = config_fn;
function echoSettings() {     //<---------------------- [*]
    const settings = `
        webpackDevServer_host: ${webpackDevServer_host}
        webpackDevServer_port: ${webpackDevServer_port}
        absolutePath_sourceFolder: ${absolutePath_sourceFolder}
        absolutePath_buildFolder: ${absolutePath_buildFolder}
    `;
    console.log(settings);
}

In the above when webpack is evoked with --env.debug flag it will run the function echoSettings() and print out Webpack’s configuration object to the terminal.

Let’s add the --env flag to our npm.scripts section in package.json :

"scripts": {
  "dev": "webpack-dev-server --no-info",         
  "dev:debug": "webpack-dev-server --env.debug", 
  "build": "webpack",
  "build:debug": "webpack --env.debug",
  "prodServer": "http-server dist -p 9090",
  "prebuild": "rimraf dist",
  "prebuild:debug": "rimraf dist",
  "test": "echo \"Error: no test specified\" && exit 1"
},

In the above, both npm run dev and npm run build now have a debug variant:

npm run dev:debug
npm run build:debug

both of which will print our webpack configuration and setting to Terminal which is useful for debugging purpose:

Debugging with Chrome’s dev tool

Let’s install node-nightly:

$ npm install --global node-nightly
$ node-nightly

Add this script to package.json:

"scripts": {
  ...
  "inspect": "DEBUG=true node-nightly --inspect --debug-brk node_modules/.bin/webpack --env.debug --env.inspect",
  ...
},

Now when we execute npm run inspect in terminal, inside the functions exported by webpack.config.js will have both env.debug and env.inspect set to true. We can check when env.debug === true and env.inspect === true to break the execution with debugger :

if (env && env.debug && env.inspect) {
    debugger; // pause in debug inspector;
}

Type node run inspect in terminal:

Copy the URL you see into chrome address bar:

Hit the resume script execution button:

The output previously printed to terminal is now printed in the browser’s console. From now on whenever our webpack crashes, we can execute npm run inspect to debug in browser !

Passing environment settings into output chunk

In the above we have seen that environment settings can be pass into webpack.config.js via. the flag --env. In this section we will see we can also pass environment setting into our application. This is done with the flag --define.

In file package.json let’s add this flag to our npm scripts dev:debug and build:debug:

--define process.env.DEBUG='true'

With this flags, the property process.env.DEBUG with value boolean true will be available in webpack output chunk. We can detect this to print out application runtime debug information. To show this let’s edit our src/main.js :

After you execute npm run dev:debug or npm run build:debug, runtime debugging information will be logged to console as we execute our application in the browser: