javascript – Sivadass N

Source Map Explorer is a bundle analyzer tool which shows treemap visualizaton of your component sizes. Check it’s Github for more expalanation.

Let’s see how we can use source-map-explorer with webpack.

First install source-map-explorer globally using npm

npm install -g source-map-explorer

Now go to your project folder and make sure you have a sourc emap file for your bundle.js. It will named like this, bundle.js.map

If the source map file is not available, you can easily generate it by configuring devtool option in webpack.

Open webpack.config.js and add devtool: ‘source-map’ after output configuration.

var path = require('path');
var webpack = require('webpack');

module.exports = {
  entry: `./src/index.jsx` ,
  output: {
    path:  path.resolve(__dirname,"build"),
    filename: "bundle.js"
  },
  devtool: 'source-map',
  module: {
    loaders: [
      {
        test: /.jsx?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {
          presets: ['es2015', 'react']
        }
      }
    ]
  },
};

Hereafter you will be generating source maps along with your bundle.js

Now just run the following command to see the magic of source-map-explorer

source-map-explorer bundle.js bundle.js.map

Here is how it will took,

Tag: javascript

How to use source-map-explorer with webpack