Options

Options

Default

Description

useDefaultAssetLoaders

true

By default, this plugin provides url-loader for images and file-loader for fonts and svg that are used by the ArcGIS API for JavaScript. If you are using another library that requires you to also load assets, you may want to disable the default loaders of this plugin and use your own.

root

"."

Is used in the env passed to your loader configuration. See environment details in the dojo-webpack-plugin.

locales

undefined

The locales you want included in your build output. See the locales details of the dojo-webpack-plugin.

exclude3D

false

ADVANCED - You can choose to exlcude all 3D related modules from the output bundles. This does not reduce the file size of the output JavaScript, but will reduce the number of bundles generated for the ArcGIS API for JavaScript.

userDefinedExcludes

[]

ADVANCED - You can provide an array modules as string that you want to exclude from the output bundles. For example, you may want to exclude layers you are not using.

If you notice some oddities in the path resolutions of modules in your bundles, you can try to define how you want them referenced.

plugins: [
newArcGISPlugin({
// "../app" or similar depending on your build.// most likely do not need to change
root:".",
// If you specify locales in the build// only those locales are available ar runtime.// Leave undefined and all locales will be available at runtime.
locales: ["en"]
})
];

Loaders

Whether you are using a TypeScript loader like ts-loader or writing modern JavaScript and using the babel-loader, the output files from the loader need to be in AMD. This is so the dependencies can be picked up by the lightweight AMD loader of this plugin during build time.

That means that for TypeScript, your tsconfig.json should have the following option:

{
"compilerOptions": {
"module": "amd"
}
}

For babel, update your configuration as follow :

{
"presets": [["@babel/preset-env",{"modules":"amd"}]]
}

Promises

Webpack will include ES6 Promises in your bundles, so you may want to include a Promise shim in your application. Some more detail here. We have tested the @dojo/shim/Promise with success in our test applications.

See options section for details of options you can provide to the plugin.

Node globals

It is recommended that you ignore the node process and global, so they don't get built into your bundle. You want to set the fs module to empty so that the webassembly files of the client-side projection engine are loaded correctly.

CSS

When working with CSS, you can load the files directly from your application and let the html-webpack-plugin and mini-css-extract-plugin output the CSS file and inject the file location directly into your output HTML file.
Note: mini-css-extract-plugin requires webpack 4 to work. If you are using webpack 3, you can use the extract-text-webpack-plugin.

However, if you would like to use the style-loader to load your styles at runtime, you will need to modify your code.

import"css!./css/main.scss";

// webpack.config.js...
plugins: [
...// For plugins registered after the ArcGISPlugin, data.request has been normalized and// resolved to an absMid and other mappings and aliases have been applied.// You will need to update the loader plugin appropriately.newwebpack.NormalModuleReplacementPlugin(/^css!/, function(data) {
data.request=data.request.replace(
/^css!/,
"!style-loader!css-loader!sass-loader?indentedSyntax=false"
);
})
...

Please note, we have tested the @arcgis/webpack-plugin with numerous other plugins, but cannot guarantee that other webpack plugins may not cause some unexpected behavior.

Asset Loaders

By default, this plugin provides provides url-loader for images and file-loader for assets that are only used by the ArcGIS API for JavaScript. However, if you are using another library that you need to load image, svg, or fonts for, you will want to provide your own loaders. You will want to set the useDefaultAssetLoaders to false.

Excluding Modules

NOTE - Advanced Usage

If you are building a 2D mapping application and do not require 3D, you can exclude 3D related modules by disabling the 3d features. This option will remove 3D modules from the output JavaScript bundles for your application. Please note, this does not impact the file size of the JavaScript used in your application, only in the number of bundles generated.

You also have the option to pass in an array of other modules that you may want to exclude from your application. For example, maybe you are not using a particular set of layers. You can add them to the userDefinedExcludes option.

Feature Detection

This plugin also utilizes the webpack-hasjs-plugin to set compile time static features that help enable the removal of unused code.

constrequiredPlugins= [
...// Check for has() features in the build// Feature list taken directly from what is// used in Dojo buildsnewHasJsPlugin({
features: {
"some-static-feature":false
}
}),
...
];

There are cases in the ArcGIS API for JavaScript where feature detection is used.

if (has("some-static-feature")) {
returntrue;
}
else {
returnfalse;
}

This will be converted to the following.

if (false) {
returntrue;
}
else {
returnfalse;
}

So when the code is run through the build and minification becomes only return false.

Override loader plugins

We are also able to change a couple of references to loader plugins and replace the output with defined modules. We manage that as part of the plugin as well.

constrequiredPlugins= [
...// For plugins registered after the DojoAMDPlugin, data.request has been normalized and// resolved to an absMid and loader-config maps and aliases have been appliednewwebpack.NormalModuleReplacementPlugin(
/^dojox\/gfx\/renderer!/,
"dojox/gfx/svg"
),
newwebpack.NormalModuleReplacementPlugin(/\/moment!/, "moment/moment")
];

Other loaders

We have some additional loaders we add out-of-the-box that are utilized as part of the Webpack bundling of CSS files and other assets.

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.