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);
});
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/],
},
},
],
},
};
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);
});
License
MIT