angular2-extjs-webpack-plugin v0.0.34

Angular2 Ext JS Webpack Plugin

This Webpack plugin produces a minimized build of the Sencha Ext JS framework containing only those classes used by your Angular2 app. Use with the angular2-extjs custom renderer for Angular2.

How it works

The plugin crawls your Angular2 source code looking for selector tags that match Ext JS xtypes as well as calls to Ext.create() and Ext.require() to compile a list of classes used by your app. It then uses Sencha Cmd to produce an optimized build of Ext JS containing only those classes and corresponding CSS. It then includes the built js and css files into your index.html.

Dependencies

You must have Ext JS 6.2+ and Sencha Cmd 6.2+ to use this plugin.

Options

The Angular2ExtJSWebpackPlugin constructor takes an object with the following properties:

• debug boolean True to output debug information.
• detail boolean True to output more detailed debug information.
• indexHtmlLocation string The path to the source file index.html.
• indexHtmlTitle string The title in the index.html.
• rootSelector string the root selector in the index.html file.
• build string Which Ext JS build to produce (testing or production).
• extThemeAppPath string The path for the Ext JS Theme project that will be created.
• extThemeAppName string The name of the Ext JS Theme project that will be created.
• extFrameworkPath string The path to the Ext JS framework.

Example

'use strict';

const path = require('path');
const webpack = require('webpack');
const Angular2ExtJSWebpackPlugin = require('angular2-extjs-webpack-plugin');

module.exports = {
	devtool: 'inline-source-map',
	entry: [
		'./src/index'
	],
	output: {
		path: path.join(__dirname, 'build'),
		filename: 'index.js'
	},
	plugins: [
		new ExtJSAngular2WebpackPlugin({
			indexHtmlLocation: 'src',
			indexHtmlTitle: 'Angular2 Webpack',
			rootSelector: 'my-app',
			build: 'testing',	// testing, production
			extThemeAppPath: '.',
			extThemeAppName: 'Theme',
			extFrameworkPath: '~/Downloads/ext-6.2.0',
			debug: false
		})
	],
	module: {
		loaders: [
			{
				test: /\.js$/,
				loader: 'babel',
				include: [
						path.join(__dirname, 'src')
				]
			},
			{
				test: /\.css$/,
				loader: 'style!css'
			},
			{
				test: /\.(ico|jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2)(\?.*)?$/,
				exclude: /\/favicon.ico$/,
				loader: 'file',
				query: {
					name: 'static/media/[name].[hash:8].[ext]'
				}
			}
		]
	}
};