[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.jsmodule.export = {
entry: ... ,
output: ... ...}
Starting with Webpack 2, webpack.config.js
can export a function:
// webpack.config.jsmodule.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.jsmodule.export = (env) => { if (env && env.mySetting) console.log(env.mySetting) // truereturn {
entry: ...
output: ...
};
}
Let’s edit our webpack.config.js
and package.json
to take advantage of this new feature:
// webpack.config.jsconst 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: