https://github.com/independer/angular-named-lazy-chunks-webpack-plugin
A Webpack plugin that assigns names to the async chunks generated for lazy routes in an Angular 2+ app
https://github.com/independer/angular-named-lazy-chunks-webpack-plugin
angular angular4 webpack webpack-plugin
Last synced: 9 months ago
JSON representation
A Webpack plugin that assigns names to the async chunks generated for lazy routes in an Angular 2+ app
- Host: GitHub
- URL: https://github.com/independer/angular-named-lazy-chunks-webpack-plugin
- Owner: Independer
- License: mit
- Created: 2017-10-24T19:13:16.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2019-01-15T13:05:38.000Z (almost 7 years ago)
- Last Synced: 2024-11-01T04:05:32.761Z (about 1 year ago)
- Topics: angular, angular4, webpack, webpack-plugin
- Language: JavaScript
- Homepage:
- Size: 18.6 KB
- Stars: 7
- Watchers: 5
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.MD
- License: LICENSE
Awesome Lists containing this project
README
[](https://travis-ci.org/Independer/angular-named-lazy-chunks-webpack-plugin)
# Angular Named Lazy Chunks Webpack Plugin
Assigns names to the async chunks generated by Webpack for lazy routes in an Angular app.
Example:
**app.module.ts**
```ts
export const ROUTES: Routes = [
{ path: '', component: HomeComponent },
{ path: 'gallery', loadChildren: './gallery/gallery.module#GalleryModule' },
{ path: 'about', loadChildren: './about/about.module#AboutModule' }
];
@NgModule({
imports: [RouterModule.forRoot(ROUTES)],
declarations: [AppComponent]
})
export class AppModule { }
```
Webpack build output without the `AngularNamedLazyChunksWebpackPlugin`:
```
Asset Size Chunks
0.155b2d62f27ec0c62c13.js 3.92 kB 0 [emitted]
1.5d938dc52f1919e39aa9.js 3.82 kB 2 [emitted]
app.9d8bb980840d155d8745.js 13.1 kB 4 [emitted]
polyfills.js 6.9 kB 7 [emitted]
vendor.js 8.38 kB 9 [emitted]
```
Webpack build output **with** the plugin:
```
Asset Size Chunks
gallery.155b2d62f27ec0c62c13.js 3.92 kB 0 [emitted]
about.5d938dc52f1919e39aa9.js 3.82 kB 2 [emitted]
app.9d8bb980840d155d8745.js 13.1 kB 4 [emitted]
polyfills.js 6.9 kB 7 [emitted]
vendor.js 8.38 kB 9 [emitted]
```
## Installation
```bash
$ npm install --save-dev angular-named-lazy-chunks-webpack-plugin
```
## Usage
**webpack.config.js**
```js
const AngularNamedLazyChunksWebpackPlugin = require('angular-named-lazy-chunks-webpack-plugin');
module.exports = {
...
plugins: [
...
new AngularNamedLazyChunksWebpackPlugin()
]
}
```
### Options
```js
{
// Default: false
// Set to "true" if you have multiple apps built with one Webpack config and
// the build output goes to one folder. In this case the plugin will try to
// determine the name of the app based on the page to the module (see
// "appNameRegex" option) and prefix the chank name with the app name (e.g.
// app1.gallery.155b2d62f27ec0c62c13.js).
multiAppMode: boolean,
// Default: "apps(\\\/|\\\\)(.*?)(\\\/|\\\\)"
// When "multiAppMode" is set to "true" this regular expression is used for
// extracting the name of the app from the module file path.
// E.g. if you have the following file structure:
// apps/
// app1/
// module1
// module2
// app2/
// module1
// module2
// The chunks will be named "app1.module1.15..c13.js",
// "app2.module1.9d...745.js", etc.
//
// Note: If a custom regex expression is provide, the name of the app is assumed to be the first match group in that regex.
appNameRegex: string,
// A function that returns the name of the chunk based on the file path of the lazy module.
// If this function is specified then "multiAppMode" and "appNameRegex" are ignored.
nameResolver: (filePath: string) => string | null
}
```
## Credit
Full credit goes to [Angular CLI](https://github.com/angular/angular-cli), where this plugin was [originally introduced](https://github.com/angular/angular-cli/blob/master/packages/%40angular/cli/plugins/named-lazy-chunks-webpack-plugin.ts).
This package includes a few tweaks (like multi-app support) and makes it available for Angular apps that are not based on Angular CLI and instead use custom Webpack config.