minor #410 Implement assets webpack plugin (codayblue)

This PR was merged into the master branch.

Discussion
----------

Implement assets webpack plugin

This should solve issue #408 because it implements the plugin that was requested to be looked into.

The changes that have happened by implementing this plugin is that the keys might not be in the file for a given entry. So lets say we have a main entry point that has JavaScript but no CSS, the CSS key will not be under that entry point. The other issue is that when a file type only has one file of a given file type it will not be in an array in the entrypoints.json file it will just be a string value linked to the property.

Commits
-------

2f106e8 First iteration of of assets-webpack-plugin

Author: weaverryan

lib/plugins/entry-files-manifest.js

@@ -9,27 +9,46 @@
 
 'use strict';
 
-const EntryFilesManifestPlugin = require('../webpack/entry-files-manifest-plugin');
 const PluginPriorities = require('./plugin-priorities');
-const path = require('path');
 const sharedEntryTmpName = require('../utils/sharedEntryTmpName');
 const copyEntryTmpName = require('../utils/copyEntryTmpName');
-const manifestKeyPrefixHelper = require('../utils/manifest-key-prefix-helper');
+const AssetsPlugin = require('assets-webpack-plugin');
+
+function processOutput(assets) {
+    if (assets.hasOwnProperty(copyEntryTmpName)) {
+        delete assets[copyEntryTmpName];
+    }
+    if (assets.hasOwnProperty(sharedEntryTmpName)) {
+        delete assets[sharedEntryTmpName];
+    }
+    // This will iterate over all the entry points and remove the / from the start of the paths. It also converts the
+    // one file entries into an array of one entry since that was how the entry point file was before this change.
+    for (const asset in assets) {
+        for (const fileType in assets[asset]) {
+            if (Array.isArray(assets[asset][fileType])) {
+                assets[asset][fileType] = assets[asset][fileType].map(buildPath => buildPath.replace(/^\//g, ''));
+            } else {
+                assets[asset][fileType] = [assets[asset][fileType].replace(/^\//g, '')];
+            }
+        }
+    }
+    return JSON.stringify(assets);
+}
 
 /**
  * @param {Array} plugins
  * @param {WebpackConfig} webpackConfig
  * @return {void}
  */
 module.exports = function(plugins, webpackConfig) {
-
     plugins.push({
-        plugin: new EntryFilesManifestPlugin(
-            path.join(webpackConfig.outputPath, 'entrypoints.json'),
-            manifestKeyPrefixHelper(webpackConfig),
-            [sharedEntryTmpName, copyEntryTmpName],
-            webpackConfig.styleEntries
-        ),
-        priority: PluginPriorities.EntryFilesManifestPlugin
+        plugin: new AssetsPlugin({
+            path: webpackConfig.outputPath,
+            filename: 'entrypoints.json',
+            includeAllFileTypes: true,
+            entrypoints: true,
+            processOutput: processOutput
+        }),
+        priority: PluginPriorities.AssetsPlugin
     });
 };

lib/plugins/plugin-priorities.js

@@ -25,5 +25,5 @@ module.exports = {
     SharedEntryContactPlugin: 20,
     ForkTsCheckerWebpackPlugin: 10,
     HashedModuleIdsPlugin: 0,
-    EntryFilesManifestPlugin: -10,
+    AssetsPlugin: -10,
 };

lib/webpack/entry-files-manifest-plugin.js

@@ -28,6 +28,7 @@
     "@babel/core": "^7.0.0",
     "@babel/plugin-syntax-dynamic-import": "^7.0.0",
     "@babel/preset-env": "^7.0.0",
+    "assets-webpack-plugin": "^3.9.7",
     "babel-loader": "^8.0.0",
     "chalk": "^2.4.1",
     "clean-webpack-plugin": "^0.1.19",

package.json

@@ -103,16 +103,14 @@ describe('Functional tests using webpack', function() {
 
                 webpackAssert.assertOutputJsonFileMatches('entrypoints.json', {
                     main: {
-                        js: ['build/runtime.js', 'build/main.js'],
-                        css: []
+                        js: ['build/runtime.js', 'build/main.js']
                     },
                     font: {
-                        // no runtime for style entries
-                        js: [],
+                        js: ['build/runtime.js'],
                         css: ['build/font.css']
                     },
                     bg: {
-                        js: [],
+                        js: ['build/runtime.js'],
                         css: ['build/bg.css']
                     },
                 });
@@ -1608,7 +1606,6 @@ module.exports = {
                 config.addEntry('other', ['./css/roboto_font.css', 'vue']);
                 config.setPublicPath('/build');
                 // enable versioning to make sure entrypoints.json is not affected
-                config.enableVersioning();
                 config.splitEntryChunks();
                 config.configureSplitChunks((splitChunks) => {
                     splitChunks.minSize = 0;
@@ -1633,7 +1630,7 @@ module.exports = {
                 });
             });
 
-            it('Custom public path does affect entrypoints.json or manifest.json', (done) => {
+            it('Custom public path does affect entrypoints.json but does not affect manifest.json', (done) => {
                 const config = createWebpackConfig('web/build', 'dev');
                 config.addEntry('main', ['./css/roboto_font.css', './js/no_require', 'vue']);
                 config.addEntry('other', ['./css/roboto_font.css', 'vue']);
@@ -1647,12 +1644,22 @@ module.exports = {
                 testSetup.runWebpack(config, (webpackAssert) => {
                     webpackAssert.assertOutputJsonFileMatches('entrypoints.json', {
                         main: {
-                            js: ['custom_prefix/runtime.js', 'custom_prefix/vendors~main~other.js', 'custom_prefix/main~other.js', 'custom_prefix/main.js'],
-                            css: ['custom_prefix/main~other.css']
+                            js: [
+                                'http://localhost:8080/build/runtime.js',
+                                'http://localhost:8080/build/vendors~main~other.js',
+                                'http://localhost:8080/build/main~other.js',
+                                'http://localhost:8080/build/main.js'
+                            ],
+                            css: ['http://localhost:8080/build/main~other.css']
                         },
                         other: {
-                            js: ['custom_prefix/runtime.js', 'custom_prefix/vendors~main~other.js', 'custom_prefix/main~other.js', 'custom_prefix/other.js'],
-                            css: ['custom_prefix/main~other.css']
+                            js: [
+                                'http://localhost:8080/build/runtime.js',
+                                'http://localhost:8080/build/vendors~main~other.js',
+                                'http://localhost:8080/build/main~other.js',
+                                'http://localhost:8080/build/other.js'
+                            ],
+                            css: ['http://localhost:8080/build/main~other.css']
                         },
                     });
 
@@ -1698,8 +1705,6 @@ module.exports = {
                 config.addEntry('main', ['./js/code_splitting', 'vue']);
                 config.addEntry('other', ['./js/no_require', 'vue']);
                 config.setPublicPath('/build');
-                // enable versioning to make sure entrypoints.json is not affected
-                config.enableVersioning();
                 config.splitEntryChunks();
                 config.configureSplitChunks((splitChunks) => {
                     splitChunks.minSize = 0;
@@ -1708,20 +1713,18 @@ module.exports = {
                 testSetup.runWebpack(config, (webpackAssert) => {
                     webpackAssert.assertOutputJsonFileMatches('entrypoints.json', {
                         main: {
-                            js: ['build/runtime.js', 'build/vendors~main~other.js', 'build/main.js'],
-                            css: []
+                            js: ['build/runtime.js', 'build/vendors~main~other.js', 'build/main.js']
                         },
                         other: {
                             // the 0.[hash].js is because the "no_require" module was already split to this
                             // so, it has that filename, instead of following the normal pattern
-                            js: ['build/runtime.js', 'build/vendors~main~other.js', 'build/0.f1e0a935.js', 'build/other.js'],
-                            css: []
+                            js: ['build/runtime.js', 'build/vendors~main~other.js', 'build/0.js', 'build/other.js']
                         },
                     });
 
                     // make split chunks are correct in manifest
                     webpackAssert.assertManifestKeyExists('build/vendors~main~other.js');
-                    webpackAssert.assertManifestKeyExists('build/0.f1e0a935.js');
+                    webpackAssert.assertManifestKeyExists('build/0.js');
 
                     done();
                 });

test/functional.js

@@ -1238,6 +1238,17 @@ assertion-error@^1.0.1:
   resolved "https://registry.yarnpkg.com/assertion-error/-/assertion-error-1.1.0.tgz#e60b6b0e8f301bd97e5375215bda406c85118c0b"
   integrity sha512-jgsaNduz+ndvGyFt3uSuWqvy4lCnIJiovtouQN5JZHOKCS2QuhEdbcQHFhVksz2N2U9hXJo8odG7ETyWlEeuDw==
 
+assets-webpack-plugin@^3.9.7:
+  version "3.9.7"
+  resolved "https://registry.yarnpkg.com/assets-webpack-plugin/-/assets-webpack-plugin-3.9.7.tgz#0c3c13632cc4490b2ef79fd0bbb16c69a724f364"
+  integrity sha512-yxo4MlSb++B88qQFE27Wf56ykGaDHZeKcSbrstSFOOwOxv33gWXtM49+yfYPSErlXPAMT5lVy3YPIhWlIFjYQw==
+  dependencies:
+    camelcase "^5.0.0"
+    escape-string-regexp "^1.0.3"
+    lodash.assign "^4.2.0"
+    lodash.merge "^4.6.1"
+    mkdirp "^0.5.1"
+
 assign-symbols@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/assign-symbols/-/assign-symbols-1.0.0.tgz#59667f41fadd4f20ccbc2bb96b8d4f7f78ec0367"
@@ -1719,6 +1730,11 @@ camelcase@^4.1.0:
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-4.1.0.tgz#d545635be1e33c542649c69173e5de6acfae34dd"
   integrity sha1-1UVjW+HjPFQmScaRc+Xeas+uNN0=
 
+camelcase@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-5.0.0.tgz#03295527d58bd3cd4aa75363f35b2e8d97be2f42"
+  integrity sha512-faqwZqnWxbxn+F1d399ygeamQNy3lPp/H9H6rNrqYh4FSVCtcY+3cub1MxA8o9mDd55mM8Aghuu/kuyYA6VTsA==
+
 caniuse-api@^1.5.2:
   version "1.6.1"
   resolved "https://registry.yarnpkg.com/caniuse-api/-/caniuse-api-1.6.1.tgz#b534e7c734c4f81ec5fbe8aca2ad24354b962c6c"
@@ -2894,7 +2910,7 @@ escape-html@~1.0.3:
   resolved "https://registry.yarnpkg.com/escape-html/-/escape-html-1.0.3.tgz#0258eae4d3d0c0974de1c169188ef0051d1d1988"
   integrity sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg=
 
-[email protected], escape-string-regexp@^1.0.2, escape-string-regexp@^1.0.5:
+[email protected], escape-string-regexp@^1.0.2, escape-string-regexp@^1.0.3, escape-string-regexp@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
   integrity sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=
@@ -5016,6 +5032,11 @@ lodash.memoize@^4.1.2:
   resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"
   integrity sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4=
 
+lodash.merge@^4.6.1:
+  version "4.6.1"
+  resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.1.tgz#adc25d9cb99b9391c59624f379fbba60d7111d54"
+  integrity sha512-AOYza4+Hf5z1/0Hztxpm2/xiPZgi/cjMqdnKTUWTBSKchJlxXXuUSxCCl8rJlf4g6yww/j6mA8nC8Hw/EZWxKQ==
+
 lodash.mergewith@^4.6.0:
   version "4.6.1"
   resolved "https://registry.yarnpkg.com/lodash.mergewith/-/lodash.mergewith-4.6.1.tgz#639057e726c3afbdb3e7d42741caa8d6e4335927"