use externals array so that external modules that do not contain globals don't throw webpack config errors

Author: Matt Miller

src/HtmlWebpackExternalsPlugin.js

@@ -23,7 +23,7 @@ export default class HtmlWebpackExternalsPlugin {
     this.assetsToPrepend = []
     this.assetsToAppend = []
     this.assetsToCopy = []
-    this.externals = {}
+    this.externals = []
 
     const { externals, hash, outputPath, publicPath, files, enabled, cwpOptions } = config
     this.hash = hash
@@ -34,7 +34,7 @@ export default class HtmlWebpackExternalsPlugin {
     this.cwpOptions = cwpOptions
 
     externals.forEach(({ module, entry, global, supplements, append }) => {
-      this.externals[module] = global
+      this.externals.push(global ? { [module]: global } : module)
 
       const localEntries = []
 
@@ -77,12 +77,9 @@ export default class HtmlWebpackExternalsPlugin {
     if (!compiler.options.externals) {
       compiler.options.externals = this.externals
     } else if (Array.isArray(compiler.options.externals)) {
-      compiler.options.externals.push(this.externals)
-    } else if (typeof compiler.options.externals === 'object') {
-      compiler.options.externals = {
-        ...compiler.options.externals,
-        ...this.externals,
-      }
+      compiler.options.externals = [...compiler.options.externals, ...this.externals]
+    } else {
+      compiler.options.externals = [compiler.options.externals, ...this.externals]
     }
 
     const publicPath = (() => {

test/HtmlWebpackExternalsPlugin.spec.js

@@ -7,6 +7,7 @@ import {
   cleanUp,
   runWebpack,
   checkBundleExcludes,
+  checkConfigExternals,
   checkCopied,
   checkHtmlIncludes,
 } from './utils'
@@ -22,35 +23,37 @@ describe('HtmlWebpackExternalsPlugin', function() {
   })
 
   it('Local JS external example', function() {
+    const externals = [
+      {
+        module: 'jquery',
+        entry: 'dist/jquery.min.js',
+        global: 'jQuery',
+      },
+    ]
+
     return runWebpack(
       new HtmlWebpackPlugin(),
-      new HtmlWebpackExternalsPlugin({
-        externals: [
-          {
-            module: 'jquery',
-            entry: 'dist/jquery.min.js',
-            global: 'jQuery',
-          },
-        ],
-      })
+      new HtmlWebpackExternalsPlugin({ externals })
     )
+      .then(({ config }) => checkConfigExternals(config, externals))
       .then(() => checkBundleExcludes('jQuery'))
       .then(() => checkCopied('vendor/jquery/dist/jquery.min.js'))
       .then(() => checkHtmlIncludes('vendor/jquery/dist/jquery.min.js', 'js'))
   })
 
   it('Local CSS external example', function() {
+    const externals = [
+      {
+        module: 'bootstrap',
+        entry: 'dist/css/bootstrap.min.css',
+      },
+    ]
+
     return runWebpack(
       new HtmlWebpackPlugin(),
-      new HtmlWebpackExternalsPlugin({
-        externals: [
-          {
-            module: 'bootstrap',
-            entry: 'dist/css/bootstrap.min.css',
-          },
-        ],
-      })
+      new HtmlWebpackExternalsPlugin({ externals })
     )
+      .then(({ config }) => checkConfigExternals(config, externals))
       .then(() => checkCopied('vendor/bootstrap/dist/css/bootstrap.min.css'))
       .then(() =>
         checkHtmlIncludes('vendor/bootstrap/dist/css/bootstrap.min.css', 'css')
@@ -195,7 +198,7 @@ describe('HtmlWebpackExternalsPlugin', function() {
         hash: true,
       })
     )
-      .then(stats => {
+      .then(({ stats }) => {
         hash = stats.toJson().hash
       })
       .then(() => checkCopied('vendor/bootstrap/dist/css/bootstrap.min.css'))

test/utils/index.js

@@ -13,7 +13,7 @@ export function cleanUp() {
 }
 
 export function runWebpack(...plugins) {
-  return promisify(webpack, {
+  const config = {
     entry: {
       app: path.resolve(__dirname, '..', 'fixtures', 'app.js'),
       style: path.resolve(__dirname, '..', 'fixtures', 'style.css'),
@@ -31,13 +31,15 @@ export function runWebpack(...plugins) {
       ],
     },
     plugins: [new ExtractTextPlugin({ filename: '[name].css' }), ...plugins],
-  }).then(stats => {
+  }
+
+  return promisify(webpack, config).then(stats => {
     assert.strictEqual(
       stats.hasErrors(),
       false,
       stats.toJson().errors.toString()
     )
-    return stats
+    return { stats, config }
   })
 }
 
@@ -58,6 +60,26 @@ export function checkCopied(file) {
   return promisify(fs.access, path.join(OUTPUT_PATH, file))
 }
 
+export function checkConfigExternals(config, externals) {
+  assert.ok(Array.isArray(config.externals), 'webpackConfig.externals is not an array');
+
+  externals.forEach(({ module, global }) => {
+    if (global) {
+      const expected = { [module]: global }
+      assert.deepEqual(
+        config.externals.find(external => external[module]),
+        expected,
+        `webpackConfig.externals did not contain ${JSON.stringify(expected)}`
+      )
+    } else {
+      assert.ok(
+        config.externals.indexOf(module) > -1,
+        `webpackConfig.externals did not contain ${module}`
+      )
+    }
+  })
+}
+
 export function checkHtmlIncludes(
   file,
   type,