Using webpack for Custom Builds

webpack is a module bundler for JavaScript. It can basically process the code in your application and bundle it up, not only into a single file, but bundled files that can be dynamically loaded as needed at runtime, for example, in an application that might have multiple routes. You can use webpack to build applications that use the ArcGIS API for JavaScript by using the @arcgis/webpack-plugin.

To learn more about webpack, please refer to the concepts and guides pages from webpack.

• Prerequisites
• Getting started
• Building your app

Prerequisites

1. Node.js version 8.x.x or higher (includes npm, the node package manager)

To check if these are installed:

node --version

Getting Started

We provide a sample application hosted on Github under the webpack directory in the jsapi-resources repository for you to get started.

jsapi-resources/4.x/webpack/demo
├── README.md
├── package-lock.json
├── package.json
├── src
│   ├── assets
│   │   ├── favicon.ico
│   │   ├── green-blue-small.png
│   │   └── icons
│   │       └── icon.png
│   ├── components
│   │   ├── header.tsx
│   │   └── webmapview.tsx
│   ├── config.ts
│   ├── css
│   │   ├── index.scss
│   │   └── main.scss
│   ├── index.html
│   └── index.tsx
├── tsconfig.json
└── webpack.config.js

However, if you prefer to start from scratch you can install the @arcgis/webpack-plugin yourself.

npm install --save-dev @arcgis/webpack-plugin@^4.15.0

You can also clone the jsapi-resources repository (code below) to your local machine or download the repository to your local machine.

git clone https://github.com/Esri/jsapi-resources.git

Building your app

For both options (clone or download), you need to copy the source files from https://github.com/Esri/jsapi-resources/tree/master/4.x/webpack/demo to a new directory. In the following steps, we'll name the new directory esrijs-webpack.

The contents of your directory should appear as follows:

esrijs-webpack
├── README.md
├── package-lock.json
├── package.json
├── src
│   ├── assets
│   │   ├── favicon.ico
│   │   ├── green-blue-small.png
│   │   └── icons
│   │       └── icon.png
│   ├── components
│   │   ├── header.tsx
│   │   └── webmapview.tsx
│   ├── config.ts
│   ├── css
│   │   ├── index.scss
│   │   └── main.scss
│   ├── index.html
│   └── index.tsx
├── tsconfig.json
└── webpack.config.js

1. Open a terminal window or shell command window
2. Change directory to esrijs-webpack
   • In the terminal window run: npm install
   • The first time this is run it may take a while
3. In the terminal window type npm start and press return
4. The command will run the webpack bundler using the @arcgis/webpack-plugin
5. Your application will be available at http://localhost:8080/
6. You can build a deployable version of your app by running npm run build.
7. This will take a little longer and build a deployable version of your application in a dist folder.

The critical portion of creating your application is going to be your webpack.config.js.

Note: To learn more about webpack, please refer to the concepts and guides pages from webpack.

See the configuration section of the webpack documentation for details on each of the options available in the configuration file.

const ArcGISPlugin = require("@arcgis/webpack-plugin");

module.exports = {
  ...
  plugins: [
    new ArcGISPlugin(),
    ...
  ],
  node: {
    process: false,
    global: false,
    fs: 'empty',
  }
};

In the current version of the @arcgis/webpack-plugin, you need to configure the application to use the workers of the ArcGIS API for JavaScript from the cdn. The workers configuration for this sample application is located under jsapi-resources/4.x/webpack/demo/src/config.ts.

import esriConfig = require("esri/config");

const DEFAULT_WORKER_URL = "https://js.arcgis.com/4.14/";
const DEFAULT_LOADER_URL = `${DEFAULT_WORKER_URL}dojo/dojo-lite.js`;

(esriConfig.workers as any).loaderUrl = DEFAULT_LOADER_URL;
esriConfig.workers.loaderConfig = {
  baseUrl: `${DEFAULT_WORKER_URL}dojo`,
  packages: [
    { name: "esri", location: DEFAULT_WORKER_URL + "esri" },
    { name: "dojo", location: DEFAULT_WORKER_URL + "dojo" },
    { name: "dojox", location: DEFAULT_WORKER_URL + "dojox" },
    { name: "dijit", location: DEFAULT_WORKER_URL + "dijit" },
    { name: "dstore", location: DEFAULT_WORKER_URL + "dstore" },
    { name: "moment", location: DEFAULT_WORKER_URL + "moment" },
    { name: "@dojo", location: DEFAULT_WORKER_URL + "@dojo" },
    {
      name: "cldrjs",
      location: DEFAULT_WORKER_URL + "cldrjs",
      main: "dist/cldr"
    },
    {
      name: "globalize",
      location: DEFAULT_WORKER_URL + "globalize",
      main: "dist/globalize"
    },
    {
      name: "maquette",
      location: DEFAULT_WORKER_URL + "maquette",
      main: "dist/maquette.umd"
    },
    {
      name: "maquette-css-transitions",
      location: DEFAULT_WORKER_URL + "maquette-css-transitions",
      main: "dist/maquette-css-transitions.umd"
    },
    {
      name: "maquette-jsx",
      location: DEFAULT_WORKER_URL + "maquette-jsx",
      main: "dist/maquette-jsx.umd"
    },
    { name: "tslib", location: DEFAULT_WORKER_URL + "tslib", main: "tslib" }
  ]
} as any;

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