An open API service indexing awesome lists of open source software.

https://github.com/potatomaster101/webpack-chunk-extract

Tool that searches and extracts the chunk loader in a Webpack site
https://github.com/potatomaster101/webpack-chunk-extract

dotnet webpack webpack-chunk webpack-chunk-loader webpack-tool

Last synced: over 1 year ago
JSON representation

Tool that searches and extracts the chunk loader in a Webpack site

Awesome Lists containing this project

README

          

# Webpack Chunk Extractor
A prototype tool that searches and extracts the chunk loader in a Webpack site, along with all the chunk filenames.

The extractor supports:
- Chunk loader that uses an object expression (e.g., `{100: 'chunk', 101: 'bbb'}[e] + '.js'`)
- Chunk loader that uses `if` statements (e.g., `if (100 === e) return 'chunk.js'`)
- Chunk loader that uses ternary operator (`?:`) (e.g., `100 === e ? 'chunk.js' : ...`)
- Chunk loader that uses `switch` statement (e.g., `switch (e) { case 100: return 'chunk.js' }`)

For an overview of how this works read [DOC.md](DOC.md).

## Note
- This tool requires [Playwright browsers](https://playwright.dev/docs/browsers): `npx playwright@1.50.1 install`
- This tool only searches for chunk loaders when visiting a Webpack site, any chunk loaders loaded on demand will not be caught
- To search more thoroughly, dump all the `.js` files found to a folder run with `-d`

## Usage
```
Description:
Webpack Chunk Loader Extractor

Usage:
ChunkSearch [options]

Arguments:
URL to the site to search for the Webpack chunk loader

Options:
-f, --file Specifies that the URL is a file path
-d, --dir Specifies that the URL is a directory path
-v, --verbose Specifies verbose output
--version Show version information
-?, -h, --help Show help and usage information
```

## Example
Samples JS files can be found under `Samples/`. They are used to test different chunk loaders generated by Webpack.

### Local `.js` File
```
dotnet run -c Release --project ChunkSearch -- -f ./Samples/small.js
```

### Local Directory With `.js` Files
```
dotnet run -c Release --project ChunkSearch -- -d ./Samples/
```

### Webpack Site
```
dotnet run -c Release --project ChunkSearch -- https://webpack.js.org/
```

## Generate Webpack Files
Sample webpack project can be found under `Webpack/`. Generate Webpack files by:
```
cd ./Webpack
npm install
npm run build
```
The generated Webpack files will be under `Webpack/dist/`.