Put ArcGIS JS API into your webpack
Recently, it was announced that there is a new @arcgis/webpack-plugin.
Since it processes the entire API, you did end up with a few dozen bundles from the JSAPI, but you will realistically only use a handful of those for any deployed application. But with the ability to integrate into webpack, you can take advantage of all the webpack tooling that comes along with it.
This means you can more easily use third-party libraries like ramda, lodash, or React pretty easily. You just start using them like you would with any other React project and it just works.
You can install it into your project like this:
npm install -save-dev @arcgis/webpack-plugin
Now you can add it to your webpack configuration.
// webpack.config.js plugins: [ new ArcGISPlugin(), ... ]
The plugin will manage the bulk of the heavy lifting for you.
Now you can just work with the JSAPI in your application without any further configuration.
import FeatureLayer from "esri/layers/FeatureLayer"; import WebMap from "esri/WebMap"; import React from "react"; import ReactDOM from "react-dom";
A couple of things still need some work, such as integration with some of the framework clis out there. Most clis require you to eject the application so you can’t use the cli with it any more in order to update the provided webpack configuration. But some clis, like create-react-app and angular-cli have plugins that conflict with the webpack-plugin. In the Angular case, they have their own TypeScript loader which does some magic involving their decorators I don’t quite understand.
You can check out the demo application here to get an idea of how to get started.
Be sure to also check out my video below on using the plugin!