ana-loader

A webpack loader for analyzing dependencies. Support TypeScript, JSX, Vue, AMD, CJS, ESM, CSS, Sass, Scss, Less and Stylus.

Getting Started

To begin, you'll need to install ana-loader:

$ npm install ana-loader --save-dev

Then add the loader to your webpack config. For example:

compile.js

const path = require('path');

const webpack = require('webpack');

const config = {
  mode: 'none',
  devtool: false,
  entry: path.resolve(__dirname, './index.js'),
  output: {
    path: path.resolve(__dirname, './dist'),
  },
  module: {
    rules: [
      {
        loader: require.resolve('ana-loader'),
      },
    ],
  },
};

const compiler = webpack(config);

compiler.run((error, stats) => {
  const { modules } = stats.toJson();
  const result = modules.map((m) => {
    return {
      id: m.name,
      reasons: m.reasons.map((r) => r.moduleName),
    };
  });

  console.log(result);
  /*
    [
      { id: './index.js', reasons: [ null ] },
      { id: './test.js', reasons: [ './index.js' ] },
      { id: './test1.css', reasons: [ './index.js' ] },
      { id: './test2.css', reasons: [ './test1.css' ] },
      { id: './test.png', reasons: [ './test1.css' ] },
      { id: 'webpack/runtime/compat get default export', reasons: [] },
      { id: 'webpack/runtime/define property getters', reasons: [] },
      { id: 'webpack/runtime/hasOwnProperty shorthand', reasons: [] },
      { id: 'webpack/runtime/make namespace object', reasons: [] }
    ]
   */
});

And run node compile.js to get dependencies info.

Options

excludes

Type: array Default: [/node_modules/]

Exclude finding dependencies in these conditions.

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        loader: `ana-loader`,
        options: {
          excludes: [/node_modules/, /test/],
        },
      },
    ],
  },
};

Examples

Get dependencies info from stats.

index.js

import './test.js';
import './test1.css';

// ...

test.js

// ...

test1.css

@import './test2.css';

.test {
  background: url('./test.png');
}
/* ... */

test2.css

/* ... */

test.png

Image.

compile.js

const path = require('path');

const webpack = require('webpack');

const config = {
  mode: 'none',
  devtool: false,
  entry: path.resolve(__dirname, './index.js'),
  output: {
    path: path.resolve(__dirname, './dist'),
  },
  module: {
    rules: [
      {
        loader: require.resolve('ana-loader'),
      },
    ],
  },
};

const compiler = webpack(config);

compiler.run((error, stats) => {
  const { modules } = stats.toJson();
  const result = modules.map((m) => {
    return {
      id: m.name,
      reasons: m.reasons.map((r) => r.moduleName),
    };
  });

  console.log(result);
  /*
    [
      { id: './index.js', reasons: [ null ] },
      { id: './test.js', reasons: [ './index.js' ] },
      { id: './test1.css', reasons: [ './index.js' ] },
      { id: './test2.css', reasons: [ './test1.css' ] },
      { id: './test.png', reasons: [ './test1.css' ] },
      { id: 'webpack/runtime/compat get default export', reasons: [] },
      { id: 'webpack/runtime/define property getters', reasons: [] },
      { id: 'webpack/runtime/hasOwnProperty shorthand', reasons: [] },
      { id: 'webpack/runtime/make namespace object', reasons: [] }
    ]
   */
});

License

MIT