From c4d3a96774e3a47516c942d66662c65b4ce87f1d Mon Sep 17 00:00:00 2001 From: Timothy Cardenas Date: Mon, 5 Aug 2019 14:17:44 -0700 Subject: [PATCH 1/4] 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 --- package/environments/base.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/package/environments/base.js b/package/environments/base.js index 72b75d9ce..a0dcea50b 100644 --- a/package/environments/base.js +++ b/package/environments/base.js @@ -65,7 +65,11 @@ 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)) + + // Allows for multiple filetypes per entry (https://webpack.js.org/guides/entry-advanced/) + let resultList = result.get(name) || [] + resultList.push(resolve(path)) + result.set(name, resultList) }) return result } From 871f24dcc5a1ee014b9da960d452ea2b698cad0d Mon Sep 17 00:00:00 2001 From: Timothy Cardenas Date: Mon, 26 Aug 2019 11:25:03 -0700 Subject: [PATCH 2/4] chore: rework implementation to prevent breaking changes --- package/environments/base.js | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/package/environments/base.js b/package/environments/base.js index a0dcea50b..83ba6fd0d 100644 --- a/package/environments/base.js +++ b/package/environments/base.js @@ -65,11 +65,18 @@ const getEntryObject = () => { paths.forEach((path) => { const namespace = relative(join(rootPath), dirname(path)) const name = join(namespace, basename(path, extname(path))) + let assetPaths = resolve(path) // Allows for multiple filetypes per entry (https://webpack.js.org/guides/entry-advanced/) - let resultList = result.get(name) || [] - resultList.push(resolve(path)) - result.set(name, resultList) + // 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.append(assetPaths) + assetPaths = previousPaths + } + + result.set(name, assetPaths) }) return result } From 8119634c9963daa328a60d269bedfbe0841f0cfa Mon Sep 17 00:00:00 2001 From: Timothy Cardenas Date: Mon, 26 Aug 2019 11:36:53 -0700 Subject: [PATCH 3/4] fix: linter errors with spacing --- package/environments/base.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package/environments/base.js b/package/environments/base.js index 83ba6fd0d..2528d0987 100644 --- a/package/environments/base.js +++ b/package/environments/base.js @@ -70,7 +70,7 @@ const getEntryObject = () => { // 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){ + if (previousPaths) { previousPaths = Array.isArray(previousPaths) ? previousPaths : [previousPaths] previousPaths.append(assetPaths) assetPaths = previousPaths From b4b480f8eab23bd353b82aadeefba09addaecc4c Mon Sep 17 00:00:00 2001 From: Timothy Cardenas Date: Mon, 26 Aug 2019 13:22:54 -0700 Subject: [PATCH 4/4] chore: add tests for new functionality --- package/environments/__tests__/base.js | 10 ++++++++++ package/environments/base.js | 2 +- test/test_app/app/javascript/packs/multi_entry.css | 4 ++++ test/test_app/app/javascript/packs/multi_entry.js | 4 ++++ 4 files changed, 19 insertions(+), 1 deletion(-) create mode 100644 test/test_app/app/javascript/packs/multi_entry.css create mode 100644 test/test_app/app/javascript/packs/multi_entry.js diff --git a/package/environments/__tests__/base.js b/package/environments/__tests__/base.js index ca462e54f..492f5acf3 100644 --- a/package/environments/__tests__/base.js +++ b/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') diff --git a/package/environments/base.js b/package/environments/base.js index 2528d0987..a63f3e6e2 100644 --- a/package/environments/base.js +++ b/package/environments/base.js @@ -72,7 +72,7 @@ const getEntryObject = () => { let previousPaths = result.get(name) if (previousPaths) { previousPaths = Array.isArray(previousPaths) ? previousPaths : [previousPaths] - previousPaths.append(assetPaths) + previousPaths.push(assetPaths) assetPaths = previousPaths } diff --git a/test/test_app/app/javascript/packs/multi_entry.css b/test/test_app/app/javascript/packs/multi_entry.css new file mode 100644 index 000000000..54b560f84 --- /dev/null +++ b/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 + */ \ No newline at end of file diff --git a/test/test_app/app/javascript/packs/multi_entry.js b/test/test_app/app/javascript/packs/multi_entry.js new file mode 100644 index 000000000..9fea9c084 --- /dev/null +++ b/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 + */