Guide applies to: modern

NPM - Webpack + Sencha Cmd Configuration

This guide explains the webpack configuration that is created when generating an application using Sencha’s OpenTooling (@sencha/ext-gen).

While some of the following configuration options are optional or can be modified, many are required for OpenTooling to drive the ExtJS build process that uses Sencha Cmd under the hood. Configurations that may be changed are marked as CONFIGURABLE.

1. Sencha Cmd Configuration

app.json

The webpack bundle should be included (loaded) before app.js to ensure that all 3rd party npm packages are available to the Ext JS runtime. If this order is incorrectly specified, packages included in the webpack bundle will not be avialable in locations like class definitions during run time of your application. The follow example indicates the correct load order of the webpack bundle and sencha cmd app bundle:

// Production
"js": [
      {"path": "${app.webpack.bundle}"},
      {"path": "app.js", "bundle": true}
],
// Development
"js": [
      {"path": "main.js", "includeInBundle": true},
      {"path": "app.js", "bundle": true}
],

2. Variables and Script Parameters

Sencha Cmd

• contextFolder: valid workspace / project path for Sencha Cmd
• toolkit: the toolkit for Sencha Cmd to build. Can be changed to any ExtJS toolkit via package.json script
• theme: the ExtJS Theme to build the project with
• packages: packages to include in the Sencha Cmd build process
• script: optional script to be run during the Webpack thisCompilation syncronous hook
• profile: [CONFIGURABLE] the build profile, defined in app.json, to be built
• environment: development or production environments
• watch: determines whether the ExtWebpackPlugin should do a sencha app build for production or sencha app watch for development

Sencha Webpack plugin

• outputFolder: location where emitted assets are placed; currently this is the root directory where Sencha Cmd is run
• entryFile: set to index.js as an entry point to load 3rd party npm packages
• emit: allows the plugin to determine whether an emit should happen or not during the build cycle
• treeshake: ES5 dead code elimination, hooked into Sencha Cmd transpile enabled
• browser: whether a browser should be launched at the specified host:port
• verbose: enabled verbose mode

Special Constants

• bundleFormat: [CONFIGURABLE] specify the format of the webpack bundle. If modified, the development settings in app.json need to be updated to accomodate whatever bundle format is used in development mode. Production mode should support all of the webpack bundle file name formatting options.
• ignoreFolders: [CONFIGURABLE] folders that should be ignored by Live Reload

2. Plugins

ExtWebpackPlugin

• The only plugin required by an Open Tooling application is Sencha’s ExtWebpackPlugin. This plugin hooks into various webpack compiler hooks to build ExtJS projects using Sencha Cmd.

3. Options

• mode: handle webpack optimizations based on development or production environments
• devtool: [CONFIGURABLE] enable source mapping, map styles, etc. for better debugging purposes
• context: points to a valid Sencha Cmd workspace or application directory
• entry: the entry point, defined by entryFile above
• output: combine the bundleFormat and emit the assets at the path specified. Sencha Cmd expects this to be the root of a valid Sencha Cmd workspace or application
• plugins: [CONFIGURABLE] ExtWebpackPlugin is required, other plugins may be added
• module: [CONFIGURABLE]
• resolve: [CONFIGURABLE]
• performance: [CONFIGURABLE] control webpack asset emit notifications, size, etc.
• stats: [CONFIGURABLE] control bundle information level
• optimization: [CONFIGURABLE] controls for chunk splitting, minification, etc.
• devServer
  • watchOptions: configured to ignore specific Sencha Cmd folders containing generated content
  • contentBase: configured to be the same directory that sencha app watch expects
  • watchContentBase: ensures Live Reload will monitor changes made to your application
  • liveReload: [CONFIGURABLE] enable Live Reload
  • historyAPIFallback: [CONFIGURABLE] enable the HTML 5 History API fallback to index.html
  • host: [CONFIGURABLE]
  • port: [CONFIGURABLE]
  • disabledHostCheck: [CONFIGURABLE] enable bypass host checking
  • compress: [CONFIGURABLE] enable GZIP compression on all webpack emitted assets
  • inline: [CONFIGURABLE] toggle between wepback dev esrver’s two modes
  • stats: [CONFIGURABLE] control bundle information level