Put ArcGIS JS API into your webpack
Rene Rubalcava | May 22, 2018
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.
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!