gund · February 12, 2024 00:06 · jwasilgeo · Jun 16, 2016 · molekilla · Aug 22, 2016
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
 <head>...</head>
 <body>
 <!-- Load Esri lib -->
 <link rel="stylesheet" href="//js.arcgis.com/4.0/esri/css/main.css">
 <script src="//js.arcgis.com/4.0/"></script>
 <!-- Load our AMD app -->
 <script type="text/javascript">
  // Wrap our app startup in AMD module
  require([
    '/vendor.bundle.js', // <-- Vendor bundle?
    '/app.bundle.js'     // <-- Your application
  ],
    function (vendor, app) {
      // Do whatewer initialization needed here...
    });
 </script>
 </body>
 </html>
diff --git a/index.prod.html b/index.prod.html
 <!DOCTYPE html>
 <html>
 <head>...</head>
 <body>
 <!-- Load Esri lib -->
 <link rel="stylesheet" href="//js.arcgis.com/4.0/esri/css/main.css">
 <script src="//js.arcgis.com/4.0/"></script>
 <!-- Load our AMD app -->
 <script type="text/javascript">
  // Wrap our app startup in AMD module
  require([
    '/<%= htmlWebpackPlugin.files.js[0] %>', // <-- Vendor bundle?
    '/<%= htmlWebpackPlugin.files.js[1] %>'     // <-- Your application
  ],
    function (vendor, app) {
      // Do whatewer initialization needed here...
      //
      // NOTE: htmlWebpackPlugin.files.js is an Array
      // that contains names of your bundles in order they were built
    });
 </script>
 </body>
 </html>
diff --git a/webpack.config.js b/webpack.config.js
 // In order to bundle an app with ArcGIS API in wepback
 // first you have to turn your bundle target to AMD, so
 // ...
 output: {
  ...
  libraryTarget: "amd" // <-- There we go
  ...
 }
 // ...
 // Also we have to tell webpack to skip all the JSAPI libraries from being bundled
 // So they will become externals (all dojo and esri libs)
 // ...
 externals: [
  function(context, request, callback) {
    if (/^dojo/.test(request) ||
      /^dojox/.test(request) ||
      /^dijit/.test(request) ||
      /^esri/.test(request)
    ) {
      return callback(null, "amd " + request);
    }
    callback();
  }
 ]
 // ...
 // Now exlude bundles from being injected into index.html page (ex. for html-webpack-plugin)
 // ...
 plugins: [
  ...
  new require('html-webpack-plugin')({
      template: '.../index.html',   // <-- Your template
      chunksSortMode: 'dependency', // <-- Important if you wont to refer to your bundles after they are built
      inject: false                 // <-- This is exclusion
    })
  ...
 ]
 // ...
 // For most of the cases this might be enough in webpack configuration
 // and depending on your bundles config you just have to `require` them in your index.html
 // See index.html file above
diff --git a/webpack.config.prod.js b/webpack.config.prod.js
 // However you might want to hash your bundles for production deployments
 // In this case hardcoding your bundles in index.html would not work anymore
 // Each new build (or once you changed the code) will generate bundles with different hashes
 // So for this you might use some plugins like WebpackMd5Hash or standard webpack chunkhash plugin
 // and your fileName would probably look smth like this
 output: {
  ...
  filename: '[name].[chunkhash].bundle.js' // <-- here you no more getting a static file names
  ...
 }
 // ...
 // In order to include those files in your index.html I am using chunk-manifest-webpack-plugin
 // It has pretty simple setup
 plugins: [
  ...
  new require('chunk-manifest-webpack-plugin')({
      filename: "manifest.json",            // <-- A file with build info
      manifestVariable: "webpackManifest"   // <-- A variable to wich you can refer later (not important)
    })
  ...
 ]
 // This seput will generate additional manifest.json file in your build directory
 // Which will contain info about your bundles in JSON format
 // And you now will be able to include your bundles in index.html with proper names
 // See index.prod.html above
	<!DOCTYPE html>
	<html>
	<head>...</head>
	<body>
	<!-- Load Esri lib -->
	<link rel="stylesheet" href="//js.arcgis.com/4.0/esri/css/main.css">
	<script src="//js.arcgis.com/4.0/"></script>
	<!-- Load our AMD app -->
	<script type="text/javascript">
	// Wrap our app startup in AMD module
	require([
	'/vendor.bundle.js', // <-- Vendor bundle?
	'/app.bundle.js' // <-- Your application
	],
	function (vendor, app) {
	// Do whatewer initialization needed here...
	});
	</script>
	</body>
	</html>
	// In order to bundle an app with ArcGIS API in wepback
	// first you have to turn your bundle target to AMD, so
	// ...
	output: {
	...
	libraryTarget: "amd" // <-- There we go
	...
	}
	// ...
	// Also we have to tell webpack to skip all the JSAPI libraries from being bundled
	// So they will become externals (all dojo and esri libs)
	// ...
	externals: [
	function(context, request, callback) {
	if (/^dojo/.test(request) \|\|
	/^dojox/.test(request) \|\|
	/^dijit/.test(request) \|\|
	/^esri/.test(request)
	) {
	return callback(null, "amd " + request);
	}
	callback();
	}
	]
	// ...
	// Now exlude bundles from being injected into index.html page (ex. for html-webpack-plugin)
	// ...
	plugins: [
	...
	new require('html-webpack-plugin')({
	template: '.../index.html', // <-- Your template
	chunksSortMode: 'dependency', // <-- Important if you wont to refer to your bundles after they are built
	inject: false // <-- This is exclusion
	})
	...
	]
	// ...
	// For most of the cases this might be enough in webpack configuration
	// and depending on your bundles config you just have to `require` them in your index.html
	// See index.html file above
	// However you might want to hash your bundles for production deployments
	// In this case hardcoding your bundles in index.html would not work anymore
	// Each new build (or once you changed the code) will generate bundles with different hashes
	// So for this you might use some plugins like WebpackMd5Hash or standard webpack chunkhash plugin
	// and your fileName would probably look smth like this
	output: {
	...
	filename: '[name].[chunkhash].bundle.js' // <-- here you no more getting a static file names
	...
	}
	// ...
	// In order to include those files in your index.html I am using chunk-manifest-webpack-plugin
	// It has pretty simple setup
	plugins: [
	...
	new require('chunk-manifest-webpack-plugin')({
	filename: "manifest.json", // <-- A file with build info
	manifestVariable: "webpackManifest" // <-- A variable to wich you can refer later (not important)
	})
	...
	]
	// This seput will generate additional manifest.json file in your build directory
	// Which will contain info about your bundles in JSON format
	// And you now will be able to include your bundles in index.html with proper names
	// See index.prod.html above