{"id":160171,"date":"2018-04-27T07:00:58","date_gmt":"2018-04-27T07:00:58","guid":{"rendered":"http:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&p=160171"},"modified":"2018-05-03T16:58:56","modified_gmt":"2018-05-03T16:58:56","slug":"using-the-new-webpack-plugin-for-the-arcgis-api-for-javascript","status":"publish","type":"blog","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/using-the-new-webpack-plugin-for-the-arcgis-api-for-javascript","title":{"rendered":"Using the new webpack plugin for the ArcGIS API for JavaScript"},"author":7531,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","format":"standard","meta":{"_acf_changed":false,"_searchwp_excluded":""},"categories":[22941],"tags":[25891,24921,27491,43621],"industry":[],"product":[36831,36601],"class_list":["post-160171","blog","type-blog","status-publish","format-standard","hentry","category-mapping","tag-arcgis","tag-javascript","tag-jsapi4","tag-webpack","product-js-api-arcgis","product-developers"],"acf":{"short_description":"Learn how to use the new @arcgis\/webpack-plugin to help you build your own bundled apps with webpack and the ArcGIS API for JavaScript today!","flexible_content":[{"acf_fc_layout":"content","content":"

We are always working hard to improve the developer experience with the ArcGIS API for JavaScript<\/a>. We released the API via npm<\/a> and Bower<\/a> so that developers could create local builds of their applications with the Dojo<\/a> build tools.<\/p>\n

Now, with the recent release of version 4.7<\/a>, we are happy to announce a new webpack plugin for the ArcGIS API for JavaScript<\/strong><\/a>!<\/p>\n

If you are unfamiliar, webpack<\/a> is a modern web development tool for building applications. It has numerous advantages, including: module bundling, dependency graphs, and built-in code optimizations. It also has many available plugins, so chances are, if you need it, there\u2019s a plugin for it! It\u2019s not uncommon for JavaScript libraries or frameworks to provide their own webpack plugins, so that\u2019s what we did.<\/p>\n

Getting Started<\/h2>\n

You can start using the @arcgis\/webpack-plugin<\/strong><\/a> in your project pretty easily.<\/p>\n

npm install --save-dev @arcgis\/webpack-plugin<\/code><\/pre>\n
Once the plugin is installed, you can start writing your application like you normally would. For example, maybe you want to use React<\/a> to build components for your application.<\/p>\n
\r\nimport<\/span> \".\/config\"<\/span>;\r\n\r\nimport<\/span> FeatureLayer = require(\"esri\/layers\/FeatureLayer\"<\/span>);\r\nimport<\/span> SceneView = require(\"esri\/views\/SceneView\"<\/span>);\r\nimport<\/span> WebMap = require(\"esri\/WebMap\"<\/span>);\r\n\r\nimport<\/span> * as<\/span> React from<\/span> \"react\"<\/span>;\r\nimport<\/span> * as<\/span> ReactDOM from<\/span> \"react-dom\"<\/span>;\r\n\r\nimport<\/span> \".\/css\/main.scss\"<\/span>;\r\n\r\nconst<\/span> onComponentLoad = (view: SceneView) => {\r\n  featureLayer.when(() => {\r\n    view.goTo({ target: featureLayer.fullExtent });\r\n  });\r\n};\r\n\r\nconst<\/span> featureLayer = new<\/span> FeatureLayer({\r\n  id: \"states\"<\/span>,\r\n  portalItem: {\r\n    id: \"b234a118ab6b4c91908a1cf677941702\"<\/span>\r\n  },\r\n  outFields: [\"NAME\"<\/span>, \"STATE_NAME\"<\/span>, \"VACANT\"<\/span>, \"HSE_UNITS\"<\/span>],\r\n  title: \"U.S. counties\"<\/span>\r\n});\r\n\r\nconst<\/span> webmap = new<\/span> WebMap({\r\n  portalItem: {\r\n    id: \"3ff64504498c4e9581a7a754412b6a9e\"<\/span>\r\n  },\r\n  layers: [featureLayer]\r\n});\r\n\r\n\/**\r\n * React portion of application\r\n *\/<\/span>\r\n\r\ninterface ComponentProps {\r\n  webmap: WebMap;\r\n  onload: (view: SceneView) => void<\/span>;\r\n}\r\n\r\nclass<\/span> WebMapComponent<\/span> extends<\/span> React<\/span>.Component<\/span><ComponentProps<\/span>, {}> {\r\n  mapDiv: any;\r\n\r\n  componentDidMount() {\r\n    const<\/span> view = new<\/span> SceneView({\r\n      map: this<\/span>.props.webmap,\r\n      container: this<\/span>.mapDiv\r\n    });\r\n    this<\/span>.props.onload(view);\r\n  }\r\n\r\n  render() {\r\n    return<\/span> (\r\n      <div<\/span> className<\/span>=\"webmap\"<\/span>\r\n        ref<\/span>={<\/span>\r\n          element<\/span> =><\/span> this.mapDiv = element\r\n        }>\r\n      <\/div<\/span>><\/span>\r\n    );\r\n  }\r\n}\r\n\r\nReactDOM.render(\r\n  <div<\/span> className<\/span>=\"main\"<\/span>><\/span>\r\n    <WebMapComponent<\/span>\r\n      webmap<\/span>={webmap}<\/span>\r\n      onload<\/span>={onComponentLoad}<\/span> \/><\/span>\r\n  <\/div<\/span>><\/span>,\r\n  document.getElementById(\"app\")\r\n);\r\n\r\n<\/code><\/pre>\n
That\u2019s a very simple application built with React and the ArcGIS API for JavaScript.<\/p>\n
\r\n\/\/ webpack.config.js<\/span>\r\nconst<\/span> ArcGISPlugin = require<\/span>(\"@arcgis\/webpack-plugin\"<\/span>);\r\n\r\n\/\/ add it to config<\/span>\r\nmodule<\/span>.exports = {\r\n  ...\r\n  plugins: [new<\/span> ArcGISPlugin()]\r\n  ...\r\n}\r\n<\/code><\/pre>\n"},{"acf_fc_layout":"image","image":{"ID":161801,"id":161801,"title":"webpack-app","filename":"webpack-app.gif","filesize":1650007,"url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/webpack-app.gif","link":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/using-the-new-webpack-plugin-for-the-arcgis-api-for-javascript\/webpack-app","alt":"@arcgis\/webpack-plugin app","author":"7531","description":"","caption":"","name":"webpack-app","status":"inherit","uploaded_to":160171,"date":"2018-04-24 19:25:40","modified":"2018-04-24 19:26:21","menu_order":0,"mime_type":"image\/gif","type":"image","subtype":"gif","icon":"https:\/\/www.esri.com\/arcgis-blog\/wp-includes\/images\/media\/default.png","width":1296,"height":810,"sizes":{"thumbnail":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/webpack-app.gif","thumbnail-width":213,"thumbnail-height":133,"medium":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/webpack-app.gif","medium-width":418,"medium-height":261,"medium_large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/webpack-app.gif","medium_large-width":768,"medium_large-height":480,"large":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/webpack-app.gif","large-width":1296,"large-height":810,"1536x1536":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/webpack-app.gif","1536x1536-width":1296,"1536x1536-height":810,"2048x2048":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/webpack-app.gif","2048x2048-width":1296,"2048x2048-height":810,"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/webpack-app.gif","card_image-width":744,"card_image-height":465,"wide_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/webpack-app.gif","wide_image-width":1296,"wide_image-height":810}},"image_position":"center","orientation":"horizontal","hyperlink":""},{"acf_fc_layout":"content","content":"
This frees you up to focus on writing your application instead of the details of building your application!<\/em><\/p>\n
We look forward to hearing about your experience with the @arcgis\/webpack-plugin<\/strong><\/a>, and if you have any problems, please feel free to submit an issue<\/a> in the repo!<\/p>\n
 <\/p>\n"}],"authors":[{"ID":7531,"user_firstname":"Rene","user_lastname":"Rubalcava","nickname":"r.rubalcava","user_nicename":"r-rubalcava","display_name":"Rene Rubalcava","user_email":"RRubalcava@esri.com","user_url":"http:\/\/odoe.net\/","user_registered":"2018-03-21 18:21:22","user_description":"SoftWhere Developer, blogger, author, geodev, and connoisseur of programming languages and JavaScript frameworks.\r\n\r\nI blog at https:\/\/odoe.net and post videos at https:\/\/www.youtube.com\/c\/renerubalcava\r\n\r\nI write code, sometimes it even works.","user_avatar":""},{"ID":7451,"user_firstname":"Noah","user_lastname":"Sager","nickname":"Noah Sager","user_nicename":"noah-sager","display_name":"Noah Sager","user_email":"NSager@esri.com","user_url":"https:\/\/www.noahsager.net\/","user_registered":"2018-03-21 18:21:19","user_description":"Passionate about JavaScript, maps, and writing (not necessarily in that order). Big fan of squirrels. Journeyman mapper of Utility Lines and Public Restrooms. Product Engineer on the ArcGIS API for JavaScript team. In Noah\u2019s spare time, he also enjoys parenting.","user_avatar":""},{"ID":7791,"user_firstname":"Yann","user_lastname":"Cabon","nickname":"YCabon","user_nicename":"ycabon","display_name":"Yann Cabon","user_email":"YCabon@esri.com","user_url":"","user_registered":"2018-04-12 18:23:30","user_description":"Lead Developer on the ArcGIS API for JavaScript 4.x","user_avatar":""}],"related_articles":[{"ID":140441,"post_author":"7451","post_date":"2018-04-19 17:30:15","post_date_gmt":"2018-04-19 17:30:15","post_content":"","post_title":"ArcGIS API for JavaScript versions 4.7 and 3.24 released","post_excerpt":"","post_status":"publish","comment_status":"closed","ping_status":"closed","post_password":"","post_name":"arcgis-api-for-javascript-versions-4-7-and-3-24-released","to_ping":"","pinged":"","post_modified":"2018-05-07 16:18:46","post_modified_gmt":"2018-05-07 16:18:46","post_content_filtered":"","post_parent":0,"guid":"http:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&p=140441","menu_order":0,"post_type":"blog","post_mime_type":"","comment_count":"0","filter":"raw"},{"ID":156611,"post_author":"6561","post_date":"2018-04-24 07:00:01","post_date_gmt":"2018-04-24 07:00:01","post_content":"","post_title":"Build 3D web apps with your 2D data","post_excerpt":"","post_status":"publish","comment_status":"closed","ping_status":"closed","post_password":"","post_name":"build-3d-web-apps-with-your-2d-data","to_ping":"","pinged":"","post_modified":"2018-04-23 23:12:30","post_modified_gmt":"2018-04-23 23:12:30","post_content_filtered":"","post_parent":0,"guid":"http:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&p=156611","menu_order":0,"post_type":"blog","post_mime_type":"","comment_count":"0","filter":"raw"},{"ID":158121,"post_author":"5981","post_date":"2018-04-23 08:00:05","post_date_gmt":"2018-04-23 08:00:05","post_content":"","post_title":"Introducing client-side projection engine","post_excerpt":"","post_status":"publish","comment_status":"closed","ping_status":"closed","post_password":"","post_name":"introducing-the-client-side-projection-engine","to_ping":"","pinged":"","post_modified":"2018-04-23 15:22:04","post_modified_gmt":"2018-04-23 15:22:04","post_content_filtered":"","post_parent":0,"guid":"http:\/\/www.esri.com\/arcgis-blog\/?post_type=blog&p=158121","menu_order":0,"post_type":"blog","post_mime_type":"","comment_count":"0","filter":"raw"}],"card_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/arcgis-webpack.png","wide_image":false},"yoast_head":"\nUsing the new webpack plugin for the ArcGIS API for JavaScript<\/title>\n<meta name=\"description\" content=\"Learn how to use the new @arcgis\/webpack-plugin to help you build your own bundled apps with webpack and the ArcGIS API for JavaScript today!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/using-the-new-webpack-plugin-for-the-arcgis-api-for-javascript\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Using the new webpack plugin for the ArcGIS API for JavaScript\" \/>\n<meta property=\"og:description\" content=\"Learn how to use the new @arcgis\/webpack-plugin to help you build your own bundled apps with webpack and the ArcGIS API for JavaScript today!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/using-the-new-webpack-plugin-for-the-arcgis-api-for-javascript\" \/>\n<meta property=\"og:site_name\" content=\"ArcGIS Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/esrigis\/\" \/>\n<meta property=\"article:modified_time\" content=\"2018-05-03T16:58:56+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@ESRI\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":[\"Article\",\"BlogPosting\"],\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/using-the-new-webpack-plugin-for-the-arcgis-api-for-javascript#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/using-the-new-webpack-plugin-for-the-arcgis-api-for-javascript\"},\"author\":{\"name\":\"Rene Rubalcava\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/5e8200af39ef9d178ccabb08822d96cd\"},\"headline\":\"Using the new webpack plugin for the ArcGIS API for JavaScript\",\"datePublished\":\"2018-04-27T07:00:58+00:00\",\"dateModified\":\"2018-05-03T16:58:56+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/using-the-new-webpack-plugin-for-the-arcgis-api-for-javascript\"},\"wordCount\":11,\"publisher\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#organization\"},\"keywords\":[\"ArcGIS\",\"JavaScript\",\"jsapi4\",\"webpack\"],\"articleSection\":[\"Mapping\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/using-the-new-webpack-plugin-for-the-arcgis-api-for-javascript\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/using-the-new-webpack-plugin-for-the-arcgis-api-for-javascript\",\"name\":\"Using the new webpack plugin for the ArcGIS API for JavaScript\",\"isPartOf\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#website\"},\"datePublished\":\"2018-04-27T07:00:58+00:00\",\"dateModified\":\"2018-05-03T16:58:56+00:00\",\"description\":\"Learn how to use the new @arcgis\/webpack-plugin to help you build your own bundled apps with webpack and the ArcGIS API for JavaScript today!\",\"breadcrumb\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/using-the-new-webpack-plugin-for-the-arcgis-api-for-javascript#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/using-the-new-webpack-plugin-for-the-arcgis-api-for-javascript\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/using-the-new-webpack-plugin-for-the-arcgis-api-for-javascript#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.esri.com\/arcgis-blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Using the new webpack plugin for the ArcGIS API for JavaScript\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#website\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/\",\"name\":\"ArcGIS Blog\",\"description\":\"Get insider info from Esri product teams\",\"publisher\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.esri.com\/arcgis-blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#organization\",\"name\":\"Esri\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Esri.png\",\"contentUrl\":\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Esri.png\",\"width\":400,\"height\":400,\"caption\":\"Esri\"},\"image\":{\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/esrigis\/\",\"https:\/\/x.com\/ESRI\",\"https:\/\/www.linkedin.com\/company\/5311\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/5e8200af39ef9d178ccabb08822d96cd\",\"name\":\"Rene Rubalcava\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/03\/ReneRubalcava-213x200.png\",\"contentUrl\":\"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/03\/ReneRubalcava-213x200.png\",\"caption\":\"Rene Rubalcava\"},\"description\":\"SoftWhere Developer, blogger, author, geodev, and connoisseur of programming languages and JavaScript frameworks. I blog at https:\/\/odoe.net and post videos at https:\/\/www.youtube.com\/c\/renerubalcava I write code, sometimes it even works.\",\"sameAs\":[\"http:\/\/odoe.net\/\",\"https:\/\/www.facebook.com\/odoenetgeo\/\",\"https:\/\/www.linkedin.com\/in\/renerubalcava\",\"https:\/\/x.com\/odoenet\"],\"url\":\"https:\/\/www.esri.com\/arcgis-blog\/author\/r-rubalcava\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Using the new webpack plugin for the ArcGIS API for JavaScript","description":"Learn how to use the new @arcgis\/webpack-plugin to help you build your own bundled apps with webpack and the ArcGIS API for JavaScript today!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/using-the-new-webpack-plugin-for-the-arcgis-api-for-javascript","og_locale":"en_US","og_type":"article","og_title":"Using the new webpack plugin for the ArcGIS API for JavaScript","og_description":"Learn how to use the new @arcgis\/webpack-plugin to help you build your own bundled apps with webpack and the ArcGIS API for JavaScript today!","og_url":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/using-the-new-webpack-plugin-for-the-arcgis-api-for-javascript","og_site_name":"ArcGIS Blog","article_publisher":"https:\/\/www.facebook.com\/esrigis\/","article_modified_time":"2018-05-03T16:58:56+00:00","twitter_card":"summary_large_image","twitter_site":"@ESRI","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":["Article","BlogPosting"],"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/using-the-new-webpack-plugin-for-the-arcgis-api-for-javascript#article","isPartOf":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/using-the-new-webpack-plugin-for-the-arcgis-api-for-javascript"},"author":{"name":"Rene Rubalcava","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/5e8200af39ef9d178ccabb08822d96cd"},"headline":"Using the new webpack plugin for the ArcGIS API for JavaScript","datePublished":"2018-04-27T07:00:58+00:00","dateModified":"2018-05-03T16:58:56+00:00","mainEntityOfPage":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/using-the-new-webpack-plugin-for-the-arcgis-api-for-javascript"},"wordCount":11,"publisher":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#organization"},"keywords":["ArcGIS","JavaScript","jsapi4","webpack"],"articleSection":["Mapping"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/using-the-new-webpack-plugin-for-the-arcgis-api-for-javascript","url":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/using-the-new-webpack-plugin-for-the-arcgis-api-for-javascript","name":"Using the new webpack plugin for the ArcGIS API for JavaScript","isPartOf":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#website"},"datePublished":"2018-04-27T07:00:58+00:00","dateModified":"2018-05-03T16:58:56+00:00","description":"Learn how to use the new @arcgis\/webpack-plugin to help you build your own bundled apps with webpack and the ArcGIS API for JavaScript today!","breadcrumb":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/using-the-new-webpack-plugin-for-the-arcgis-api-for-javascript#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/using-the-new-webpack-plugin-for-the-arcgis-api-for-javascript"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/using-the-new-webpack-plugin-for-the-arcgis-api-for-javascript#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.esri.com\/arcgis-blog\/"},{"@type":"ListItem","position":2,"name":"Using the new webpack plugin for the ArcGIS API for JavaScript"}]},{"@type":"WebSite","@id":"https:\/\/www.esri.com\/arcgis-blog\/#website","url":"https:\/\/www.esri.com\/arcgis-blog\/","name":"ArcGIS Blog","description":"Get insider info from Esri product teams","publisher":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.esri.com\/arcgis-blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.esri.com\/arcgis-blog\/#organization","name":"Esri","url":"https:\/\/www.esri.com\/arcgis-blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Esri.png","contentUrl":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2018\/04\/Esri.png","width":400,"height":400,"caption":"Esri"},"image":{"@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/esrigis\/","https:\/\/x.com\/ESRI","https:\/\/www.linkedin.com\/company\/5311\/"]},{"@type":"Person","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/5e8200af39ef9d178ccabb08822d96cd","name":"Rene Rubalcava","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.esri.com\/arcgis-blog\/#\/schema\/person\/image\/","url":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/03\/ReneRubalcava-213x200.png","contentUrl":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2021\/03\/ReneRubalcava-213x200.png","caption":"Rene Rubalcava"},"description":"SoftWhere Developer, blogger, author, geodev, and connoisseur of programming languages and JavaScript frameworks. I blog at https:\/\/odoe.net and post videos at https:\/\/www.youtube.com\/c\/renerubalcava I write code, sometimes it even works.","sameAs":["http:\/\/odoe.net\/","https:\/\/www.facebook.com\/odoenetgeo\/","https:\/\/www.linkedin.com\/in\/renerubalcava","https:\/\/x.com\/odoenet"],"url":"https:\/\/www.esri.com\/arcgis-blog\/author\/r-rubalcava"}]}},"text_date":"April 27, 2018","author_name":"Multiple Authors","author_page":"https:\/\/www.esri.com\/arcgis-blog\/products\/js-api-arcgis\/mapping\/using-the-new-webpack-plugin-for-the-arcgis-api-for-javascript","custom_image":"https:\/\/www.esri.com\/arcgis-blog\/app\/uploads\/2025\/08\/Newsroom-Keyart-Wide-1920-x-1080.jpg","primary_product":"ArcGIS Maps SDK for JavaScript","tag_data":[{"term_id":25891,"name":"ArcGIS","slug":"arcgis","term_group":0,"term_taxonomy_id":25891,"taxonomy":"post_tag","description":"","parent":0,"count":209,"filter":"raw"},{"term_id":24921,"name":"JavaScript","slug":"javascript","term_group":0,"term_taxonomy_id":24921,"taxonomy":"post_tag","description":"","parent":0,"count":151,"filter":"raw"},{"term_id":27491,"name":"jsapi4","slug":"jsapi4","term_group":0,"term_taxonomy_id":27491,"taxonomy":"post_tag","description":"","parent":0,"count":111,"filter":"raw"},{"term_id":43621,"name":"webpack","slug":"webpack","term_group":0,"term_taxonomy_id":43621,"taxonomy":"post_tag","description":"","parent":0,"count":2,"filter":"raw"}],"category_data":[{"term_id":22941,"name":"Mapping","slug":"mapping","term_group":0,"term_taxonomy_id":22941,"taxonomy":"category","description":"","parent":0,"count":2696,"filter":"raw"}],"product_data":[{"term_id":36831,"name":"ArcGIS Maps SDK for JavaScript","slug":"js-api-arcgis","term_group":0,"term_taxonomy_id":36831,"taxonomy":"product","description":"","parent":36601,"count":363,"filter":"raw"},{"term_id":36601,"name":"Developers","slug":"developers","term_group":0,"term_taxonomy_id":36601,"taxonomy":"product","description":"","parent":0,"count":765,"filter":"raw"}],"primary_product_link":"https:\/\/www.esri.com\/arcgis-blog\/?s=#&products=js-api-arcgis","_links":{"self":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/blog\/160171","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/blog"}],"about":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/types\/blog"}],"author":[{"embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/users\/7531"}],"replies":[{"embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/comments?post=160171"}],"version-history":[{"count":0,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/blog\/160171\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/media?parent=160171"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/categories?post=160171"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/tags?post=160171"},{"taxonomy":"industry","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/industry?post=160171"},{"taxonomy":"product","embeddable":true,"href":"https:\/\/www.esri.com\/arcgis-blog\/wp-json\/wp\/v2\/product?post=160171"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
You can find the full source code for this application<\/a> on GitHub. All the code splitting and bundle generation is managed by webpack. It will generate one bundle per layer, because web maps<\/a> can contain any layer type, and they are loaded automatically. Your main bundle will only load the bundled files required for your application. Other bundles will be loaded as needed at runtime.<\/p>\n
Now you can update your webpack configuration to use the @arcgis\/webpack-plugin<\/strong><\/a>.<\/p>\n