ana-loader
v0.2.3
Published
A webpack loader for analyzing dependencies. Support TypeScript, JSX, Vue, AMD, CJS, ESM, CSS, Sass, Scss, Less and Stylus.
Downloads
24
Readme
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: [] }
]
*/
});