webpack-query
A CLI tool that allows you to ask questions about your webpack bundle.
Installation
- Install the software:
yarn add @cgamesplay/webpack-query
-
Set up webpack to save the stats to a well-known location using something like stats-webpack-plugin. Make sure that source is included in the output stats.
-
Monkey-patch
node_modules/webpack/lib/Stats.js
if (showSource && module._source) {
// Old version:
// obj.source = module._source.source();
// New version:
const sourceAndMap = module._source.sourceAndMap();
obj.source = sourceAndMap.source;
obj.sourceMap = sourceAndMap.map;
}
- Add an alias to your
package.json
to make your life easier.
"scripts": {
"wq": "webpack-query --file path/to/stats.json",
}
Usage
Once you have that alias set up, make sure to build your webpack bundle so that the stats file is available. Then you can use the alias you created to run queries.
webpack
yarn wq dump
Examples
Where is this module imported from?
$ yarn wq list-references ./example/src/module.js
example/src/index.js:1:import { sayHello } from "./module";
Operations
dump
Output the raw webpack stats file. Potentially useful for debugging.
find-module
Given a string, try to resolve it to a specific module and then output the resolved module's identifier.
list-references
List all places in where the named module is imported.