@ngx-webpack/core

Generates Webpack 2 configuration for development, testing and deployment. It provides npm scripts also for running the configurations in different modes.

Installation

1npm install @ngx-webpack/core --save-dev

Usage

Create webpack.config.js.

1'use strict';
2module.exports = require('@ngx-webpack/core').webpack();

Modes

The generated configuration can fit different use cases based on environment variables or input parameters.

Development

Can bundle and serve the application with static assets. Refreshes bundle on changes. Suitable for serving the files with webpack-dev-server.

It transpiles Typescript files from the main entry point (src/app/main.ts) and exports global styles to a single file (style.bundle.css). Can handle different types of templates (HTML, PUG) and styles (CSS, LESS, SASS) for components. Supports Ahead-of-Time compilation.

Can be activated with process.env.NODE_ENV = 'development'' or process.env.npm_lifecycle_event = 'start' or require('ngx-webpack').webpack({ env: 'development' });

Testing

Suitable for usage with karma test runner.

Can be activated with process.env.NODE_ENV = 'test'' or process.env.npm_lifecycle_event = 'test*' or require('@ngx-webpack/core').webpack({ env: 'test' });

The configuration for karma can also be generated.

1'use strict';
2let karmaConfig = require('ngx-karma').karma(require('./webpack.config'));
3
4module.exports = (config) => {
5  config.set(karmaConfig);
6};

Runs all tests (*.spec.ts) required from a main entry point (src/app/test.ts).

Deployment

Can bundle the application as in development with the addition of minification and offline-first approach. Only bundles the application, doesn't serve it with webpack-dev-server.

Can be activated with process.env.NODE_ENV = 'production'' or process.env.npm_lifecycle_event = 'build' or require('@ngx-webpack/core').webpack({ env: 'production' });

Dll generation

Special kind of mode intended for generating Webpack DLL files for faster development builds and test runs.

Customization

Customization can be done before generation with the predefined options or afterwards by modifying the generated Webpack configuration.

Here is the list of default options and a later added loader to the generated configuration.

1let webpackConfig = require('@ngx-webpack/core').webpack({
2  // For which environment the config will be generated
3  // Possible values: development, test, production, install
4  env: 'development',
5  
6  // The port where the application will be available in development
7  port: 3000,
8  
9  // Where the bundled files will be created
10  outputDir: 'dist',
11  
12  // What type of files are used in component templates
13  // Possible values: html, pug - otherwise corresponding loader should be installed
14  templateFormat: 'html',
15  
16  // What type of styles are used in component and global styles
17  // Possible values: css, scss, sass, less - otherwise corresponding loader should be installed
18  styleFormat: 'css',
19  
20  // Location of Typescript configuration
21  tsConfig: 'tsconfig.json',
22    
23  // Location of Tslint configuration
24  tsLint: 'tslint.json',
25  
26  // Run AOT compilation when bundling
27  aot: false,
28  
29  // Whether to reload page on file changes
30  liveReload: true,
31  
32  // Use linting while bundling
33  continuousLinting: true,
34  
35  // Generate entry index.html file or not
36  indexHtml: true,
37  
38  // Use file content hash as suffix in file names, if false defaults to 'bundle'
39  useHash: true,
40  
41  // Add service worker for offline caching
42  serviceWorker: true,
43  
44  // Files to be copied from ./src directory
45  staticFiles: [
46    { "from": "assets", "to": "assets" }
47  ],
48  
49  // Use generated dll file to speed up builds
50  useDlls: true,
51  
52  // Polyfill files to be included before everything else
53  polyfills: [
54    'ts-helpers',
55    'core-js/client/shim',
56    'zone.js/dist/zone',
57    'zone.js/dist/long-stack-trace-zone'
58  ],
59  
60  // Polyfill files necessary for rnning the tests
61  testPolyfills: [
62    'zone.js/dist/async-test',
63    'zone.js/dist/fake-async-test',
64    'zone.js/dist/sync-test',
65    'zone.js/dist/proxy',
66    'zone.js/dist/jasmine-patch',
67  ],
68  
69  // Packages to be included in vendor file next to main file
70  // If false value given, skips the generation of vendor entry bundle, 
71  // polyfills have to be manually included at entry script also
72  vendors: [
73    '@angular/animations',
74    '@angular/common',
75    '@angular/core',
76    '@angular/platform-browser',
77    '@angular/http',
78    'rxjs/Observable',
79    'rxjs/Subject',
80    'rxjs/ReplaySubject',
81  ],
82  
83  // Packages used in DLL generation in addition to vendor files (won't be included in production build)
84  dlls: [
85    '@angular/compiler',
86    '@angular/platform-browser-dynamic'
87  ]
88});
89
90// Add Coffeescript loader manually
91webpackConfig.module.rules.push({
92  test: /\.coffee$/,
93  loader: 'coffee-loader'
94});
95
96module.exports = webpackConfig;

Loaders

Typescript files are translated with awesome-typescript-loader. Inside components styleUrls and templateUrl will be inlined with angular2-template-loader. When using loadChildren inside routing, it will be moved to separate chunks with angular-router-loader.

Inside the src/app directory .css files will be required as strings to work with angular2-template-loader. Outside this directory they will be moved to a single file(style.bundle.css) with extract-text-plugin. Currently only CSS files are supported for stylesheets. But if you want another format, just add it to modules.rules after the package generated the Webpack config.

In AOT mode components are compiled with their templates and styles. In this mode the Typescript loaders are replaced with the @ngtools/webpack loader. Technically it does the job of angular2-template-loader and angular-router-loader also.

Additional loaders are added for images and fonts to handle them inside stylesheets.

Testing

For test running Jasmine is used in combination with Karma + PhantomJS browser.

Tests can be run with the npm test command. It runs all files with *.spec.ts extension inside the src/app folder. The test setup is done in src/app/test.ts.

To run tests continuously add the following script: "scripts": { "test-watch": "ng-test --watch" }. It will speed up rebuilds and run the tests automatically after every change.

Linting

Linting is done with Tslint and Codelyzer rules. It is included as a pre-loader for Webpack.

It's setup:

{
  "extends": "ngx-tslint-config"
}

Deployment

After adding "scripts": { "build": "ng-build" } and running it, the generated files will appear in the dist folder. These are minified and ready for deployment.

Github Pages deployment can be done with "scripts": { "deploy": "ng-deploy" }.

Instead of the original endpoint src/app/main.ts it starts from src/app/main.aot.ts.

Example projects

• Angular 2 PhoneCat