Esri / Arcgis Webpack Plugin
Programming Languages
Labels
Projects that are alternatives of or similar to Arcgis Webpack Plugin
@arcgis/webpack-plugin
Helper plugin for building ArcGIS API for JavaScript applications with webpack.
This version of the plugin is for 4.18 or greater of the ArcGIS API for JavaScript.
For version 4.17 and lower, please see this documentation here.
Features
Requires version 4.18.0
or greater of arcgis-js-api
or @arcgis/core
.
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. |
locales |
undefined |
The t9n locales you want included in your build output. If not specified, all locales will be availble. |
features |
{} | ADVANCED - See the Additional Features section |
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. |
Usage
npm install --save-dev @arcgis/webpack-plugin
// webpack.config.js
const ArcGISPlugin = require("@arcgis/webpack-plugin");
// add it to config
module.exports = {
...
plugins: [new ArcGISPlugin()]
...
}
If you want to specify supported locales, you can define them in the plugin.
// webpack.config.js
module.exports = {
...
plugins: [
new ArcGISPlugin({
locales: ['en', 'es']
})
]
...
}
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
.
// webpack.config.js
...
plugins: [
new ArcGISPlugin({
// disable provided asset loaders
useDefaultAssetLoaders: false
})
],
...
Then you can provide your own asset loaders.
// webpack.config.js
...
module: {
rules: [
...
{
test: /(@arcgis\/core|arcgis-js-api)([\\]+|\/).*.(jpe?g|png|gif|webp)$/,
loader: "url-loader",
options: {
// Inline files smaller than 10 kB (10240 bytes)
limit: 10 * 1024,
}
},
{
test: /(@arcgis\/core|arcgis-js-api)([\\]+|\/).*.(ttf|eot|svg|png|jpg|gif|ico|wsv|otf|woff(2)?)(\?[a-z0-9]+)?$/,
use: [
"file-loader"
]
}
]
}
...
Additional Features
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.
// webpack.config.js
...
plugins: [
new ArcGISPlugin({
// exclude 3D modules from build
features: {
"3d": false
}
})
],
...
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.
// webpack.config.js
...
plugins: [
new ArcGISPlugin({
// exclude modules you do not need
userDefinedExcludes: [
"@arcgis/core/layers/BingMapsLayer",
"@arcgis/core/layers/CSVLayer",
"@arcgis/core/layers/GeoRSSLayer",
"@arcgis/core/layers/ImageryLayer",
"@arcgis/core/layers/KMLLayer",
"@arcgis/core/layers/MapImageLayer",
"@arcgis/core/layers/OpenStreetMapLayer",
"@arcgis/core/layers/StreamLayer",
"@arcgis/core/layers/WMSLayer",
"@arcgis/core/layers/WMTSLayer",
"@arcgis/core/layers/WebTileLayer"
]
})
],
...
Again, this considered ADVANCED usage, so please use with caution.
Issues
Find a bug or want to request a new feature enhancement? Let us know by submitting an issue.
Contributing
Anyone and everyone is welcome to contribute. We do accept pull requests.
- Get involved
- Report issues
- Contribute code
- Improve documentation
Licensing
Copyright 2020 Esri
Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
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.
A copy of the license is available in the repository's LICENSE file