All Projects → Esri → Arcgis Webpack Plugin

Esri / Arcgis Webpack Plugin

Licence: apache-2.0
Webpack plugin for the ArcGIS API for JavaScript

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Arcgis Webpack Plugin

Esri Loader
A tiny library to help load ArcGIS API for JavaScript modules in non-Dojo applications
Stars: ✭ 400 (+220%)
Mutual labels:  webpack, web-development
Gulp Scss Starter
Frontend development with pleasure. SCSS version
Stars: ✭ 339 (+171.2%)
Mutual labels:  webpack, web-development
Gulp Pug Starter
Frontend development with pleasure. Pug + SCSS version
Stars: ✭ 228 (+82.4%)
Mutual labels:  webpack, web-development
Whs.js
🚀 🌪 Super-fast 3D framework for Web Applications 🥇 & Games 🎮. Based on Three.js
Stars: ✭ 5,685 (+4448%)
Mutual labels:  webpack, web-development
Rust Wasm Webpack Tutorial
Finished example project for my guide on setting up a Webpack project with Rust and WebAssembly
Stars: ✭ 122 (-2.4%)
Mutual labels:  webpack
Vue Spa Project
vue.js + vuex + vue-router + fetch + element-ui + es6 + webpack + mock 纯前端SPA项目开发实践
Stars: ✭ 118 (-5.6%)
Mutual labels:  webpack
Php Sf Flex Webpack Encore Vuejs
A simple app skeleton to try to make every components work together : symfony 4 (latest stable at the date, but work with sf 3.3+ if you just change the versions in composer.json), symfony/flex, webpack-encore, vuejs 2.5.x, boostrap 4 sass
Stars: ✭ 118 (-5.6%)
Mutual labels:  webpack
Awesome Bundle Size
📝 An awesome list of tools and techniques to make your web bundle size smaller and your web apps load faster.
Stars: ✭ 118 (-5.6%)
Mutual labels:  webpack
Webpack Bundle
Bundle to Integrate Webpack into Symfony
Stars: ✭ 124 (-0.8%)
Mutual labels:  webpack
Youtube desktop
The desktop Youtube Application built using Electron. (In development)
Stars: ✭ 123 (-1.6%)
Mutual labels:  webpack
Webiny
[NOT MAINTAINED] Main Webiny app responsible for parsing requests and bootstrapping other apps. Includes all the core ReactJs components.
Stars: ✭ 121 (-3.2%)
Mutual labels:  webpack
React Typescript Webpack
Seed for building React app using Typescript and Webpack build using FLUXless architecture
Stars: ✭ 118 (-5.6%)
Mutual labels:  webpack
Reactly Starter Kit
Deployable React + Webpack 2 starter kit
Stars: ✭ 122 (-2.4%)
Mutual labels:  webpack
Style Loader
Style Loader
Stars: ✭ 1,572 (+1157.6%)
Mutual labels:  webpack
Isomorphic Redux Cnode
😊👻基于react->express->mongo技术栈的同构SPA
Stars: ✭ 123 (-1.6%)
Mutual labels:  webpack
Webpacktemplate
webpack多页面脚手架
Stars: ✭ 118 (-5.6%)
Mutual labels:  webpack
Web
Kottans web course 🎓
Stars: ✭ 121 (-3.2%)
Mutual labels:  web-development
Everything Is A Plugin
Everything is a Plugin: Mastering webpack from the inside out. NgConf 2017
Stars: ✭ 123 (-1.6%)
Mutual labels:  webpack
Aot Loader
⚠️ [Deprecated] Ahead-of-Time Compiler for Webpack.
Stars: ✭ 121 (-3.2%)
Mutual labels:  webpack
Vue Starter
🐩 A boilerplate for HTML5, Vue, Vue Router, i18n, Tailwind, Windi, Netlify, and Vite.
Stars: ✭ 120 (-4%)
Mutual labels:  webpack

@arcgis/webpack-plugin

npm version build status apache licensed

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.

  1. Get involved
  2. Report issues
  3. Contribute code
  4. 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

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].