Feature: Add support for multiple files per entry (#2476)

* feature: enable multiple file types per entry

It is possible to provide different types of files when using an
array of values for entry to achieve separate bundles for CSS
and JavaScript (and other) files in applications that are not using
import for styles in JavaScript (pre Single Page Applications or
different reasons).

For additional info: https://webpack.js.org/guides/entry-advanced/

This is particularly useful if you are migrating from a per page
css/js organization as was common with rails <= 6

* chore: rework implementation to prevent breaking changes

* fix: linter errors with spacing

* chore: add tests for new functionality

Author: trcarden

package/environments/__tests__/base.js

@@ -29,6 +29,16 @@ describe('Environment', () => {
       )
     })
 
+    test('should return multi file entry points', () => {
+      const config = environment.toWebpackConfig()
+      expect(config.entry.multi_entry.sort()).toEqual(
+          [
+            resolve('app', 'javascript', 'packs', 'multi_entry.css'),
+            resolve('app', 'javascript', 'packs', 'multi_entry.js')
+          ]
+      )
+    })
+
     test('should return output', () => {
       const config = environment.toWebpackConfig()
       expect(config.output.filename).toEqual('js/[name]-[contenthash].js')

package/environments/base.js

@@ -65,7 +65,18 @@ const getEntryObject = () => {
   paths.forEach((path) => {
     const namespace = relative(join(rootPath), dirname(path))
     const name = join(namespace, basename(path, extname(path)))
-    result.set(name, resolve(path))
+    let assetPaths = resolve(path)
+
+    // Allows for multiple filetypes per entry (https://webpack.js.org/guides/entry-advanced/)
+    // Transforms the config object value to an array with all values under the same name
+    let previousPaths = result.get(name)
+    if (previousPaths) {
+      previousPaths = Array.isArray(previousPaths) ? previousPaths : [previousPaths]
+      previousPaths.push(assetPaths)
+      assetPaths = previousPaths
+    }
+
+    result.set(name, assetPaths)
   })
   return result
 }

test/test_app/app/javascript/packs/multi_entry.css

@@ -0,0 +1,4 @@
+/*
+ * Dummy file #1 for Multi File Entry points: https://webpack.js.org/guides/entry-advanced/
+ * This file must be named the same
+ */

test/test_app/app/javascript/packs/multi_entry.js

@@ -0,0 +1,4 @@
+/*
+ * Dummy file #2 for Multi File Entry points: https://webpack.js.org/guides/entry-advanced/
+ * This file must be named the same
+ */