Have the *_pack_tag support entrypoints (#1735)

* Adds support for split_chunks in the javascript_pack_tag

* Updates the documentation to use entrypoints

* Added a explicit deprecation notice to the CommonChunks docs

* Updates the docs with the correct documentation

* Lookup the pack in the entrypoints of the manifest

In the previous attempt you had to specify `split_chunks: true` in the
options of the `*_pack_tag`. Now the `manifest.rb` looks up the entrypoints
when they're present.

Without any change to the `*_pack_tag` Webpacker supports `SplitChunks`
and `RuntimeChunks`.

* Resets the  to the previous version.

Author: Stefan Vermaas

docs/webpack.md

@@ -256,7 +256,48 @@ const { environment } = require('@rails/webpacker')
 environment.resolvedModules.append('vendor', 'vendor')
 ```
 
-### Add common chunks
+### Add SplitChunks (Webpack V4)
+Originally, chunks (and modules imported inside them) were connected by a parent-child relationship in the internal webpack graph. The CommonsChunkPlugin was used to avoid duplicated dependencies across them, but further optimizations were not possible
+
+Since webpack v4, the CommonsChunkPlugin was removed in favor of optimization.splitChunks.
+
+For the full configuration options of SplitChunks, see the [Webpack documentation](https://webpack.js.org/plugins/split-chunks-plugin/).
+
+```js
+// config/webpack/environment.js
+const WebpackAssetsManifest = require('webpack-assets-manifest');
+
+const splitChunks = {
+  optimization: {
+    splitChunks: {
+      chunks: 'all'
+    },
+  },
+};
+
+environment.config.merge(splitChunks);
+
+// Should override the existing manifest plugin
+environment.plugins.insert(
+  'Manifest',
+  new WebpackAssetsManifest({
+    entrypoints: true, // default in rails is false
+    writeToDisk: true, // rails defaults copied from webpacker
+    publicPath: true // rails defaults copied from webpacker
+  })
+)
+```
+
+To use the `javascript_pack_tag` or the `stylesheet_pack_tag` with `SplitChunks` or `RuntimeChunks` you can refer to the packs as usual.
+
+```erb
+javascript_pack_tag "your-entrypoint-javascript-file"
+stylesheet_pack_tag "your-entrypoint-stylesheet-file"
+```
+
+For the old configuration with the CommonsChunkPlugin see below. **Note** that this functionality is deprecated in Webpack V4.
+
+### Add common chunks (deprecated in Webpack V4)
 
 The CommonsChunkPlugin is an opt-in feature that creates a separate file (known as a chunk), consisting of common modules shared between multiple entry points. By separating common modules from bundles, the resulting chunked file can be loaded once initially, and stored in the cache for later use. This results in page speed optimizations as the browser can quickly serve the shared code from the cache, rather than being forced to load a larger bundle whenever a new page is visited.
 

lib/webpacker/helper.rb

@@ -83,10 +83,6 @@ def stylesheet?(name)
     end
 
     def sources_from_pack_manifest(names, type:)
-      names.map { |name| Webpacker.manifest.lookup!(pack_name_with_extension(name, type: type)) }
-    end
-
-    def pack_name_with_extension(name, type:)
-      "#{name}#{compute_asset_extname(name.to_s, type: type)}"
+      names.map { |name| Webpacker.manifest.lookup!(name, type: type) }.flatten
     end
 end

lib/webpacker/manifest.rb

@@ -18,13 +18,29 @@ def refresh
     @data = load
   end
 
-  def lookup(name)
+  def lookup(name, pack_type = {})
     compile if compiling?
-    find name
+
+    # When using SplitChunks or RuntimeChunks the manifest hash will contain
+    # an extra object called "entrypoints". When the entrypoints key is not
+    # present in the manifest, or the name is not found in the entrypoints hash,
+    # it will raise a NoMethodError. If this happens, we should try to lookup
+    # a single instance of the pack based on the given name.
+    begin
+      manifest_pack_type = manifest_type(pack_type[:type])
+      manifest_pack_name = manifest_name(name, manifest_pack_type)
+
+      # Lookup the pack in the entrypoints of the manifest
+      find("entrypoints")[manifest_pack_name][manifest_pack_type]
+    rescue NoMethodError
+
+      # Lookup a single instance of the pack
+      find(full_pack_name(name, pack_type[:type]))
+    end
   end
 
-  def lookup!(name)
-    lookup(name) || handle_missing_entry(name)
+  def lookup!(name, pack_type = {})
+    lookup(name, pack_type) || handle_missing_entry(name)
   end
 
   private
@@ -36,14 +52,51 @@ def compile
       Webpacker.logger.tagged("Webpacker") { compiler.compile }
     end
 
+    def data
+      if config.cache_manifest?
+        @data ||= load
+      else
+        refresh
+      end
+    end
+
     def find(name)
       data[name.to_s].presence
     end
 
+    def full_pack_name(name, pack_type)
+      return name unless File.extname(name.to_s).empty?
+      "#{name}.#{manifest_type(pack_type)}"
+    end
+
     def handle_missing_entry(name)
       raise Webpacker::Manifest::MissingEntryError, missing_file_from_manifest_error(name)
     end
 
+    def load
+      if config.public_manifest_path.exist?
+        JSON.parse config.public_manifest_path.read
+      else
+        {}
+      end
+    end
+
+    # The `manifest_name` method strips of the file extension of the name, because in the
+    # manifest hash the entrypoints are defined by their pack name without the extension.
+    # When the user provides a name with a file extension, we want to try to strip it off.
+    def manifest_name(name, pack_type)
+      return name if File.extname(name.to_s).empty?
+      File.basename(name, pack_type)
+    end
+
+    def manifest_type(pack_type)
+      case pack_type
+      when :javascript then "js"
+      when :stylesheet then "css"
+      else pack_type.to_s
+      end
+    end
+
     def missing_file_from_manifest_error(bundle_name)
       <<-MSG
 Webpacker can't find #{bundle_name} in #{config.public_manifest_path}. Possible causes:
@@ -56,20 +109,4 @@ def missing_file_from_manifest_error(bundle_name)
 #{JSON.pretty_generate(@data)}
       MSG
     end
-
-    def data
-      if config.cache_manifest?
-        @data ||= load
-      else
-        refresh
-      end
-    end
-
-    def load
-      if config.public_manifest_path.exist?
-        JSON.parse config.public_manifest_path.read
-      else
-        {}
-      end
-    end
 end

test/helper_test.rb

@@ -56,6 +56,14 @@ def test_javascript_pack_tag_splat
       javascript_pack_tag("bootstrap.js", "application.js", defer: true)
   end
 
+  def test_javascript_pack_tag_split_chunks
+    assert_equal \
+      %(<script src="/packs/vendors~application~bootstrap-c20632e7baf2c81200d3.chunk.js"></script>\n) +
+        %(<script src="/packs/vendors~application-e55f2aae30c07fb6d82a.chunk.js"></script>\n) +
+        %(<script src="/packs/application-k344a6d59eef8632c9d1.js"></script>),
+      javascript_pack_tag("application")
+  end
+
   def test_stylesheet_pack_tag
     assert_equal \
       %(<link rel="stylesheet" media="screen" href="/packs/bootstrap-c38deda30895059837cf.css" />),

test/manifest_test.rb

@@ -25,4 +25,14 @@ def test_lookup_nil
   def test_lookup_success
     assert_equal Webpacker.manifest.lookup("bootstrap.js"), "/packs/bootstrap-300631c4f0e0f9c865bc.js"
   end
+
+  def test_lookup_entrypoint
+    application_entrypoints = [
+      "/packs/vendors~application~bootstrap-c20632e7baf2c81200d3.chunk.js",
+      "/packs/vendors~application-e55f2aae30c07fb6d82a.chunk.js",
+      "/packs/application-k344a6d59eef8632c9d1.js"
+    ]
+
+    assert_equal Webpacker.manifest.lookup!("application", type: :javascript), application_entrypoints
+  end
 end

test/test_app/public/packs/manifest.json

@@ -3,5 +3,14 @@
   "application.css": "/packs/application-dd6b1cd38bfa093df600.css",
   "bootstrap.js": "/packs/bootstrap-300631c4f0e0f9c865bc.js",
   "application.js": "/packs/application-k344a6d59eef8632c9d1.js",
-  "application.png": "/packs/application-k344a6d59eef8632c9d1.png"
+  "application.png": "/packs/application-k344a6d59eef8632c9d1.png",
+  "entrypoints": {
+    "application": {
+      "js": [
+        "/packs/vendors~application~bootstrap-c20632e7baf2c81200d3.chunk.js",
+        "/packs/vendors~application-e55f2aae30c07fb6d82a.chunk.js",
+        "/packs/application-k344a6d59eef8632c9d1.js"
+      ]
+    }
+  }
 }