This repository has been archived by the owner on Apr 5, 2021. It is now read-only.

16 Sep 01:40

mmiller42

v3.3.3

c7c8f57

v3.3.3

What's New in v3.3.3

This is a summary of the differences between v3.3.3 and v3.3.2.

Commits

Show commits

SHA	Author	Message
`0a1bb55`	mmiller42	Needs an npmignore
`c7c8f57`	mmiller42	3.3.3

Changed files

➕ `.npmignore`

Show changes

@@ -0,0 +1,13 @@
+# OS/IDE files
+.DS_Store
+*#
+*~
+.idea
+
+# Dependencies
+node_modules
+
+# Logs
+*.log
+.node_repl_history
+.node_history

`package-lock.json`

Inline diff not displayed. View the whole file

`package.json`

Show changes

@@ -1,6 +1,6 @@
 {
   "name": "html-webpack-externals-plugin",
-  "version": "3.3.2",
+  "version": "3.3.3",
   "description": "Webpack plugin that works alongside html-webpack-plugin to use pre-packaged vendor bundles.",
   "keywords": [
     "htmlwebpackplugin",

Assets 2

16 Sep 01:40

mmiller42

v3.3.2

e06fc67

v3.3.2

What's New in v3.3.2

This is a summary of the differences between v3.3.2 and v3.3.1.

Commits

Show commits

SHA	Author	Message
`e06fc67`	mmiller42	3.3.2

Changed files

`package-lock.json`

Inline diff not displayed. View the whole file

`package.json`

Show changes

@@ -1,6 +1,6 @@
 {
   "name": "html-webpack-externals-plugin",
-  "version": "3.3.1",
+  "version": "3.3.2",
   "description": "Webpack plugin that works alongside html-webpack-plugin to use pre-packaged vendor bundles.",
   "keywords": [
     "htmlwebpackplugin",

Assets 2

16 Sep 01:40

mmiller42

v3.3.1

f365c6b

v3.3.1

What's New in v3.3.1

This is a summary of the differences between v3.3.1 and v3.3.0.

Commits

Show commits

SHA	Author	Message
`ba54b60`	mmiller42	Spaces are probably better
`30ce0d4`	mmiller42	Move config schema to separate file for readability
`f365c6b`	mmiller42	3.3.1

Changed files

`.babelrc`

Show changes

@@ -1,17 +1,17 @@
 {
-	"presets": [
-		[
-			"babel-preset-env",
-			{
-				"targets": {
-					"node": "4.3.0"
-				}
-			}
-		]
-	],
-	"plugins": [
-		"babel-plugin-add-module-exports",
-		"babel-plugin-transform-class-properties",
-		"babel-plugin-transform-object-rest-spread"
-	]
+  "presets": [
+    [
+      "babel-preset-env",
+      {
+        "targets": {
+          "node": "4.3.0"
+        }
+      }
+    ]
+  ],
+  "plugins": [
+    "babel-plugin-add-module-exports",
+    "babel-plugin-transform-class-properties",
+    "babel-plugin-transform-object-rest-spread"
+  ]
 }

`.editorconfig`

Show changes

@@ -1,8 +1,8 @@
 root = true
 
-[src/**.js]
-indent_style = tab
-indent_size = tab
+[{src/**.{js,json},*.json,.babelrc,*.md}]
+indent_style = space
+indent_size = 2
 end_of_line = lf
 charset = utf-8
 trim_trailing_whitespace = true

`package-lock.json`

Inline diff not displayed. View the whole file

`package.json`

Show changes

@@ -1,57 +1,57 @@
 {
-	"name": "html-webpack-externals-plugin",
-	"version": "3.3.0",
-	"description": "Webpack plugin that works alongside html-webpack-plugin to use pre-packaged vendor bundles.",
-	"keywords": [
-		"htmlwebpackplugin",
-		"webpack",
-		"html",
-		"externals"
-	],
-	"main": "lib/index.js",
-	"scripts": {
-		"prepack": "npm run build",
-		"precommit": "lint-staged",
-		"build": "rm -rf lib && babel src --out-dir lib --source-maps --copy-files",
-		"watch": "npm run build -- --watch"
-	},
-	"lint-staged": {
-		"*.js": [
-			"prettier --write --use-tabs --no-semi --single-quote --trailing-comma es5 'src/**/*.js'",
-			"git add"
-		]
-	},
-	"engines": {
-		"node": ">=4.3.0 <5.0.0 || >=5.10"
-	},
-	"repository": {
-		"type": "git",
-		"url": "git+https://github.com/mmiller42/html-webpack-externals-plugin.git"
-	},
-	"author": "Matt Miller <[email protected]>",
-	"license": "MIT",
-	"bugs": {
-		"url": "https://github.com/mmiller42/html-webpack-externals-plugin/issues"
-	},
-	"homepage": "https://github.com/mmiller42/html-webpack-externals-plugin#readme",
-	"devDependencies": {
-		"babel-cli": "^6.24.1",
-		"babel-core": "^6.25.0",
-		"babel-plugin-add-module-exports": "^0.2.1",
-		"babel-plugin-transform-class-properties": "^6.24.1",
-		"babel-plugin-transform-object-rest-spread": "^6.23.0",
-		"babel-preset-env": "^1.6.0",
-		"husky": "^0.14.3",
-		"lint-staged": "^4.0.1",
-		"prettier": "^1.5.3"
-	},
-	"peerDependencies": {
-		"html-webpack-plugin": "^2.0.0",
-		"webpack": "^2.0.0"
-	},
-	"dependencies": {
-		"ajv": "^5.2.2",
-		"copy-webpack-plugin": "^4.0.1",
-		"html-webpack-include-assets-plugin": "0.0.7"
-	}
+  "name": "html-webpack-externals-plugin",
+  "version": "3.3.1",
+  "description": "Webpack plugin that works alongside html-webpack-plugin to use pre-packaged vendor bundles.",
+  "keywords": [
+    "htmlwebpackplugin",
+    "webpack",
+    "html",
+    "externals"
+  ],
+  "main": "lib/index.js",
+  "scripts": {
+    "prepack": "npm run build",
+    "precommit": "lint-staged",
+    "build": "rm -rf lib && babel src --out-dir lib --source-maps --copy-files",
+    "watch": "npm run build -- --watch"
+  },
+  "lint-staged": {
+    "*.js": [
+      "prettier --write --no-semi --single-quote --trailing-comma es5 '{src/**/*.{js,json},*.json}'",
+      "git add"
+    ]
+  },
+  "engines": {
+    "node": ">=4.3.0 <5.0.0 || >=5.10"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/mmiller42/html-webpack-externals-plugin.git"
+  },
+  "author": "Matt Miller <[email protected]>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/mmiller42/html-webpack-externals-plugin/issues"
+  },
+  "homepage": "https://github.com/mmiller42/html-webpack-externals-plugin#readme",
+  "devDependencies": {
+    "babel-cli": "^6.24.1",
+    "babel-core": "^6.25.0",
+    "babel-plugin-add-module-exports": "^0.2.1",
+    "babel-plugin-transform-class-properties": "^6.24.1",
+    "babel-plugin-transform-object-rest-spread": "^6.23.0",
+    "babel-preset-env": "^1.6.0",
+    "husky": "^0.14.3",
+    "lint-staged": "^4.0.1",
+    "prettier": "^1.5.3"
+  },
+  "peerDependencies": {
+    "html-webpack-plugin": "^2.0.0",
+    "webpack": "^2.0.0"
+  },
+  "dependencies": {
+    "ajv": "^5.2.2",
+    "copy-webpack-plugin": "^4.0.1",
+    "html-webpack-include-assets-plugin": "0.0.7"
+  }
 }

`src/HtmlWebpackExternalsPlugin.js`

Show changes

@@ -1,168 +1,120 @@
 import CopyWebpackPlugin from 'copy-webpack-plugin'
 import HtmlWebpackIncludeAssetsPlugin from 'html-webpack-include-assets-plugin'
 import Ajv from 'ajv'
+import configSchema from './configSchema.json'
 
 export default class HtmlWebpackExternalsPlugin {
-	static validateArguments = (() => {
-		const ajv = new Ajv({ useDefaults: true })
-		const validateConfig = ajv.compile({
-			type: 'object',
-			properties: {
-				externals: {
-					type: 'array',
-					items: {
-						type: 'object',
-						properties: {
-							module: { type: 'string' },
-							entry: {
-								type: ['string', 'array', 'object'],
-								items: {
-									type: ['string', 'object'],
-									properties: {
-										path: { type: 'string' },
-										type: { type: 'string', enum: ['js', 'css'] },
-									},
-									required: ['path', 'type'],
-								},
-								minItems: 1,
-								properties: {
-									path: { type: 'string' },
-									type: { type: 'string', enum: ['js', 'css'] },
-								},
-								required: ['path', 'type'],
-							},
-							global: { type: ['string', 'null'], default: null },
-							supplements: {
-								type: 'array',
-								items: { type: 'string' },
-								default: [],
-							},
-							append: { type: 'boolean', default: false },
-						},
-						required: ['module', 'entry'],
-					},
-					minItems: 1,
-				},
-				hash: { type: 'boolean', default: false },
-				outputPath: { type: 'string', default: 'vendor' },
-				publicPath: { type: ['string', 'null'], default: null },
-				files: {
-					type: ['string', 'array', 'null'],
-					items: { type: 'string' },
-					minItems: 1,
-					default: null,
-				},
-			},
-			required: ['externals'],
-		})
-
-		return config => {
-			if (!validateConfig(config)) {
-				throw new TypeError(ajv.errorsText(validateConfig.errors))
-			}
-		}
-	})()
-
-	static URL_ENTRY = /^(http:|https:)?\/\//
-
-	constructor(config) {
-		HtmlWebpackExternalsPlugin.validateArguments(config)
-
-		this.assetsToPrepend = []
-		this.assetsToAppend = []
-		this.assetsToCopy = []
-		this.externals = {}
-
-		const { externals, hash, outputPath, publicPath, files } = config
-		this.hash = hash
-		this.outputPath = outputPath
-		this.publicPath = publicPath
-		this.files = files
-
-		externals.forEach(({ module, entry, global, supplements, append }) => {
-			this.externals[module] = global
-
-			const localEntries = []
-
-			const entries = (Array.isArray(entry) ? entry : [entry]).map(entry => {
-				if (typeof entry === 'string') {
-					entry = { path: entry, type: null }
-				}
-				if (HtmlWebpackExternalsPlugin.URL_ENTRY.test(entry.path)) {
-					return entry
-				}
-				const localEntry = \`${module}/${entry.path}\`
-				localEntries.push(localEntry)
-				return { ...entry, path: localEntry }
-			})
-
-			if (append) {
-				this.assetsToAppend = [...this.assetsToAppend, ...entries]
-			} else {
-				this.assetsToPrepend = [...this.assetsToPrepend, ...entries]
-			}
-
-			this.assetsToCopy = [
-				...this.assetsToCopy,
-				...localEntries,
-				...supplements.map(asset => \`${module}/${asset}\`),
-			]
-		})
-	}
-
-	apply(compiler) {
-		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 = {
-				...c...

Assets 2

16 Sep 01:40

mmiller42

v3.3.0

0ab1491

v3.3.0

What's New in v3.3.0

This is a summary of the differences between v3.3.0 and v3.2.0.

Commits

Show commits

SHA	Author	Message
`b0a5d0c`	mmiller42	Allow type to be manually specified for assets. Will require merge and release of jharris4/html-webpack-tags-plugin#8
`b984710`	mmiller42	checking off on roadmap
`6d9e1b1`	mmiller42	Footnote for using hash
`6437e12`	mmiller42	Merge branch 'master' into override-type # Conflicts: # ROADMAP.md
`96d2c39`	mmiller42	Merge branch 'master' into override-type
`8d3d373`	mmiller42	Adding tons and tons of examples to the docs
`30a2845`	mmiller42	Clarifying a couple of options
`f8fdfe6`	mmiller42	Upgrading html-webpack-include-assets-plugin
`0ab1491`	mmiller42	3.3.0

Changed files

`README.md`

Show changes

@@ -43,7 +43,7 @@ The constructor takes a configuration object with the following properties.
 | --- | --- | --- | --- |
 | \`externals\` | array&lt;object&gt; | An array of vendor modules that will be excluded from your Webpack bundle and added as \`script\` or \`link\` tags in your HTML output. | *None* |
 | \`externals[].module\` | string | The name of the vendor module. This should match the package name, e.g. if you are writing \`import React from 'react'\`, this would be \`react\`. | *None* |
-| \`externals[].entry\` | string \| array&lt;string&gt; | The path, relative to the vendor module directory, to its pre-bundled distro file. e.g. for React, use \`dist/react.js\`, since the file exists at \`node_modules/react/dist/react.js\`. Specify an array if there are multiple CSS/JS files to inject. To use a CDN instead, simply use a fully qualified URL beginning with \`http://\`, \`https://\`, or \`//\`. | *None* |
+| \`externals[].entry\` | string \| array&lt;string&gt; \| object \| array&lt;object \| string&gt; | The path, relative to the vendor module directory, to its pre-bundled distro file. e.g. for React, use \`dist/react.js\`, since the file exists at \`node_modules/react/dist/react.js\`. Specify an array if there are multiple CSS/JS files to inject. To use a CDN instead, simply use a fully qualified URL beginning with \`http://\`, \`https://\`, or \`//\`.<br><br>For entries whose type (JS or CSS) cannot be inferred by file extension, pass an object such as \`{ path: 'https://some/url', type: 'css' }\` (or \`type: 'js'\`). | *None* |
 | \`externals[].global\` | string \| null | For JavaScript modules, this is the name of the object globally exported by the vendor's dist file. e.g. for React, use \`React\`, since \`react.js\` creates a \`window.React\` global. For modules without an export (such as CSS), omit this property or use \`null\`. | \`null\` |
 | \`externals[].supplements\` | array&lt;string&gt; | For modules that require additional resources, specify globs of files to copy over to the output. e.g. for Bootstrap CSS, use \`['dist/fonts/']\`, since Glyphicon fonts are referenced in the CSS and exist at \`node_modules/bootstrap/dist/fonts/\`. | \`[]\` |
 | \`externals[].append\` | boolean | Set to true to inject this module after your Webpack bundles. | \`false\` |
@@ -52,35 +52,236 @@ The constructor takes a configuration object with the following properties.
 | \`publicPath\` | string \| null | Override Webpack config's \`publicPath\` for the externals files, or \`null\` to use the default \`output.publicPath\` value. | \`null\` |
 | \`files\` | string \| array&lt;string&gt; \| null | If you have multiple instances of HtmlWebpackPlugin, use this to specify globs of which files you want to inject assets into. Will add assets to all files by default. | \`null\` |
 
-## Example
+## Examples
+
+### Local JS external example
+
+This example assumes \`jquery\` is installed in the app. It:
+
+1. adds \`jquery\` to your Webpack config's \`externals\` object to exclude it from your bundle, telling it to expect a global object called \`jQuery\` (on the \`window\` object)
+1. copies \`node_modules/jquery/dist/jquery.min.js\` to \`<output path>/vendor/jquery/dist/jquery.min.js\`
+1. adds \`<script type="text/javascript" src="<public path>/vendor/jquery/dist/jquery.min.js"></script>\` to your HTML file, before your chunks
+
+\`\`\`js
+new HtmlWebpackExternalsPlugin({
+  externals: [
+    {
+      module: 'jquery',
+      entry: 'dist/jquery.min.js',
+      global: 'jQuery',
+    },
+  ],
+})
+\`\`\`
+
+### Local CSS external example
+
+This example assumes \`bootstrap\` is installed in the app. It:
+
+1. copies \`node_modules/bootstrap/dist/css/bootstrap.min.css\` to \`<output path>/vendor/bootstrap/dist/css/bootstrap.min.css\`
+1. adds \`<link href="<public path>/vendor/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">\` to your HTML file, before your chunks
+
+\`\`\`js
+new HtmlWebpackExternalsPlugin({
+  externals: [
+    {
+      module: 'bootstrap',
+      entry: 'dist/css/bootstrap.min.css',
+    },
+  ],
+})
+\`\`\`
+
+### Local external with supplemental assets example
+
+This example assumes \`bootstrap\` is installed in the app. It:
+
+1. copies \`node_modules/bootstrap/dist/css/bootstrap.min.css\` to \`<output path>/vendor/bootstrap/dist/css/bootstrap.min.css\`
+1. copies all contents of \`node_modules/bootstrap/dist/fonts/\` to \`<output path>/vendor/bootstrap/dist/fonts/\`
+1. adds \`<link href="<public path>/vendor/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">\` to your HTML file, before your chunks
+
+\`\`\`js
+new HtmlWebpackExternalsPlugin({
+  externals: [
+    {
+      module: 'bootstrap',
+      entry: 'dist/css/bootstrap.min.css',
+      supplements: ['dist/fonts/'],
+    },
+  ],
+})
+\`\`\`
+
+### CDN example
+
+This example does not require the \`jquery\` module to be installed. It:
+
+1. adds \`jquery\` to your Webpack config's \`externals\` object to exclude it from your bundle, telling it to expect a global object called \`jQuery\` (on the \`window\` object)
+1. adds \`<script type="text/javascript" src="https://unpkg.com/[email protected]/dist/jquery.min.js"></script>\` to your HTML file, before your chunks
 
 \`\`\`js
 new HtmlWebpackExternalsPlugin({
   externals: [
     {
-      // Specify that \`react\` module will be externalized (not bundled)
-      module: 'react',
-      // Copy \`node_modules/react/dist/react.js\` into output and insert \`script\` tag
-      entry: 'dist/react.js',
-      // Specify that the \`react\` module is accessed via \`window.React\`
-      global: 'React',
+      module: 'jquery',
+      entry: 'https://unpkg.com/[email protected]/dist/jquery.min.js',
+      global: 'jQuery',
     },
+  ],
+})
+\`\`\`
+
+### URL without implicit extension example
+
+Some CDN URLs don't have file extensions, so the plugin cannot determine whether to use a \`link\` tag or a \`script\` tag. In these situations, you can pass an object in place of the \`entry\` property that specifies the path and type explicitly.
+
+This example uses the Google Fonts API to load the Roboto font. It:
+
+1. adds \`<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">\` to your HTML file, before your chunks
+
+\`\`\`js
+new HtmlWebpackExternalsPlugin({
+  externals: [
     {
-      module: 'react-dom',
-      entry: 'dist/react-dom.js',
-      global: 'ReactDOM',
+      module: 'google-roboto',
+      entry: {
+        path: 'https://fonts.googleapis.com/css?family=Roboto',
+        type: 'css',
+      },
     },
+  ],
+})
+\`\`\`
+
+### Module with multiple entry points example
+
+Some modules require more than one distro file to be loaded. For example, Bootstrap has a normal and a theme CSS entry point.
+
+This example assumes \`bootstrap\` is installed in the app. It:
+
+1. copies \`node_modules/bootstrap/dist/css/bootstrap.min.css\` to \`<output path>/vendor/bootstrap/dist/css/bootstrap.min.css\`
+1. copies \`node_modules/bootstrap/dist/css/bootstrap-theme.min.css\` to \`<output path>/vendor/bootstrap/dist/css/bootstrap-theme.min.css\`
+1. copies all contents of \`node_modules/bootstrap/dist/fonts/\` to \`<output path>/vendor/bootstrap/dist/fonts/\`
+1. adds \`<link href="<public path>/vendor/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet...

Assets 2

16 Sep 01:40

mmiller42

v3.2.0

0c95681

v3.2.0

What's New in v3.2.0

This is a summary of the differences between v3.2.0 and v3.1.0.

Commits

Show commits

SHA	Author	Message
`80a02ad`	mmiller42	check off list
`59f3bcb`	mmiller42	Use JSON schema defaults instead to normalize config
`30d1a13`	mmiller42	delete roadmap
`4e52510`	mmiller42	Add files option
`0c95681`	mmiller42	3.2.0

Changed files

`README.md`

Show changes

@@ -50,6 +50,7 @@ The constructor takes a configuration object with the following properties.
 | \`hash\` | boolean | Set to true to append the injected module distro paths with a unique hash for cache-busting. | \`false\` |
 | \`outputPath\` | string | The path (relative to your Webpack \`outputPath\`) to store externals copied over by this plugin. | \`vendor\` |
 | \`publicPath\` | string \| null | Override Webpack config's \`publicPath\` for the externals files, or \`null\` to use the default \`output.publicPath\` value. | \`null\` |
+| \`files\` | string \| array&lt;string&gt; \| null | If you have multiple instances of HtmlWebpackPlugin, use this to specify globs of which files you want to inject assets into. Will add assets to all files by default. | \`null\` |
 
 ## Example

➖ `ROADMAP.md`

Show changes

@@ -1,7 +0,0 @@
-# v3.0.0 Roadmap
-
-* [ ] Support CDNs in addition to copying local modules to the build
-* [ ] Support ways to manually specify asset type (e.g. for when URLs don't end in \`.css\` or \`.js\`) -- may be dependent on html-webpack-include-assets-plugin
-* [ ] Allow more flexibility in how files are copied to the public output via copy-webpack-plugin
-* [x] Allow overriding of output \`publicPath\`
-* [ ] Support specifying which HTML files are affected by the plugin in the case of multiple instances of html-webpack-plugin

`package-lock.json`

Inline diff not displayed. View the whole file

`package.json`

Show changes

@@ -1,6 +1,6 @@
 {
 	"name": "html-webpack-externals-plugin",
-	"version": "3.1.0",
+	"version": "3.2.0",
 	"description": "Webpack plugin that works alongside html-webpack-plugin to use pre-packaged vendor bundles.",
 	"keywords": [
 		"htmlwebpackplugin",

`src/HtmlWebpackExternalsPlugin.js`

Show changes

@@ -4,7 +4,7 @@ import Ajv from 'ajv'
 
 export default class HtmlWebpackExternalsPlugin {
 	static validateArguments = (() => {
-		const ajv = new Ajv()
+		const ajv = new Ajv({ useDefaults: true })
 		const validateConfig = ajv.compile({
 			type: 'object',
 			properties: {
@@ -19,20 +19,27 @@ export default class HtmlWebpackExternalsPlugin {
 								items: { type: 'string' },
 								minItems: 1,
 							},
-							global: { type: ['string', 'null'] },
+							global: { type: ['string', 'null'], default: null },
 							supplements: {
 								type: 'array',
 								items: { type: 'string' },
+								default: [],
 							},
-							append: { type: 'boolean' },
+							append: { type: 'boolean', default: false },
 						},
 						required: ['module', 'entry'],
 					},
 					minItems: 1,
 				},
-				hash: { type: 'boolean' },
-				outputPath: { type: 'string' },
-				publicPath: { type: ['string', 'null'] },
+				hash: { type: 'boolean', default: false },
+				outputPath: { type: 'string', default: 'vendor' },
+				publicPath: { type: ['string', 'null'], default: null },
+				files: {
+					type: ['string', 'array', 'null'],
+					items: { type: 'string' },
+					minItems: 1,
+					default: null,
+				},
 			},
 			required: ['externals'],
 		})
@@ -54,44 +61,38 @@ export default class HtmlWebpackExternalsPlugin {
 		this.assetsToCopy = []
 		this.externals = {}
 
-		const {
-			externals,
-			hash = false,
-			outputPath = 'vendor',
-			publicPath = null,
-		} = config
+		const { externals, hash, outputPath, publicPath, files } = config
 		this.hash = hash
 		this.outputPath = outputPath
 		this.publicPath = publicPath
+		this.files = files
 
-		externals.forEach(
-			({ module, entry, global = null, supplements = [], append = false }) => {
-				this.externals[module] = global
-
-				const localEntries = []
-
-				const entries = (Array.isArray(entry) ? entry : [entry]).map(entry => {
-					if (HtmlWebpackExternalsPlugin.URL_ENTRY.test(entry)) {
-						return entry
-					}
-					const localEntry = \`${module}/${entry}\`
-					localEntries.push(localEntry)
-					return localEntry
-				})
-
-				if (append) {
-					this.assetsToAppend = [...this.assetsToAppend, ...entries]
-				} else {
-					this.assetsToPrepend = [...this.assetsToPrepend, ...entries]
-				}
+		externals.forEach(({ module, entry, global, supplements, append }) => {
+			this.externals[module] = global
+
+			const localEntries = []
 
-				this.assetsToCopy = [
-					...this.assetsToCopy,
-					...localEntries,
-					...supplements.map(asset => \`${module}/${asset}\`),
-				]
+			const entries = (Array.isArray(entry) ? entry : [entry]).map(entry => {
+				if (HtmlWebpackExternalsPlugin.URL_ENTRY.test(entry)) {
+					return entry
+				}
+				const localEntry = \`${module}/${entry}\`
+				localEntries.push(localEntry)
+				return localEntry
+			})
+
+			if (append) {
+				this.assetsToAppend = [...this.assetsToAppend, ...entries]
+			} else {
+				this.assetsToPrepend = [...this.assetsToPrepend, ...entries]
 			}
-		)
+
+			this.assetsToCopy = [
+				...this.assetsToCopy,
+				...localEntries,
+				...supplements.map(asset => \`${module}/${asset}\`),
+			]
+		})
 	}
 
 	apply(compiler) {
@@ -134,6 +135,7 @@ export default class HtmlWebpackExternalsPlugin {
 						),
 						append,
 						hash: this.hash,
+						files: this.files,
 						publicPath: '',
 					})
 				)

Assets 2

16 Sep 01:40

mmiller42

v3.1.0

781cc65

v3.1.0

What's New in v3.1.0

This is a summary of the differences between v3.1.0 and v3.0.0.

Commits

Show commits

SHA	Author	Message
`09bfaec`	mmiller42	Adding roadmap
`ec84b02`	mmiller42	Allow publicPath to be overridden
`76a32fc`	mmiller42	Allow URLs to be specified
`bbfb624`	mmiller42	Clean up validateConfig
`781cc65`	mmiller42	3.1.0

Changed files

`README.md`

Show changes

@@ -43,12 +43,13 @@ The constructor takes a configuration object with the following properties.
 | --- | --- | --- | --- |
 | \`externals\` | array&lt;object&gt; | An array of vendor modules that will be excluded from your Webpack bundle and added as \`script\` or \`link\` tags in your HTML output. | *None* |
 | \`externals[].module\` | string | The name of the vendor module. This should match the package name, e.g. if you are writing \`import React from 'react'\`, this would be \`react\`. | *None* |
-| \`externals[].entry\` | string \| array&lt;string&gt; | The path, relative to the vendor module directory, to its pre-bundled distro file. e.g. for React, use \`dist/react.js\`, since the file exists at \`node_modules/react/dist/react.js\`. Specify an array if there are multiple CSS/JS files to inject. | *None* |
+| \`externals[].entry\` | string \| array&lt;string&gt; | The path, relative to the vendor module directory, to its pre-bundled distro file. e.g. for React, use \`dist/react.js\`, since the file exists at \`node_modules/react/dist/react.js\`. Specify an array if there are multiple CSS/JS files to inject. To use a CDN instead, simply use a fully qualified URL beginning with \`http://\`, \`https://\`, or \`//\`. | *None* |
 | \`externals[].global\` | string \| null | For JavaScript modules, this is the name of the object globally exported by the vendor's dist file. e.g. for React, use \`React\`, since \`react.js\` creates a \`window.React\` global. For modules without an export (such as CSS), omit this property or use \`null\`. | \`null\` |
 | \`externals[].supplements\` | array&lt;string&gt; | For modules that require additional resources, specify globs of files to copy over to the output. e.g. for Bootstrap CSS, use \`['dist/fonts/']\`, since Glyphicon fonts are referenced in the CSS and exist at \`node_modules/bootstrap/dist/fonts/\`. | \`[]\` |
 | \`externals[].append\` | boolean | Set to true to inject this module after your Webpack bundles. | \`false\` |
 | \`hash\` | boolean | Set to true to append the injected module distro paths with a unique hash for cache-busting. | \`false\` |
 | \`outputPath\` | string | The path (relative to your Webpack \`outputPath\`) to store externals copied over by this plugin. | \`vendor\` |
+| \`publicPath\` | string \| null | Override Webpack config's \`publicPath\` for the externals files, or \`null\` to use the default \`output.publicPath\` value. | \`null\` |
 
 ## Example

➕ `ROADMAP.md`

Show changes

@@ -0,0 +1,7 @@
+# v3.0.0 Roadmap
+
+* [ ] Support CDNs in addition to copying local modules to the build
+* [ ] Support ways to manually specify asset type (e.g. for when URLs don't end in \`.css\` or \`.js\`) -- may be dependent on html-webpack-include-assets-plugin
+* [ ] Allow more flexibility in how files are copied to the public output via copy-webpack-plugin
+* [x] Allow overriding of output \`publicPath\`
+* [ ] Support specifying which HTML files are affected by the plugin in the case of multiple instances of html-webpack-plugin

`package-lock.json`

Inline diff not displayed. View the whole file

`package.json`

Show changes

@@ -1,6 +1,6 @@
 {
 	"name": "html-webpack-externals-plugin",
-	"version": "3.0.0",
+	"version": "3.1.0",
 	"description": "Webpack plugin that works alongside html-webpack-plugin to use pre-packaged vendor bundles.",
 	"keywords": [
 		"htmlwebpackplugin",
@@ -13,7 +13,7 @@
 		"prepack": "npm run build",
 		"precommit": "lint-staged",
 		"build": "rm -rf lib && babel src --out-dir lib --source-maps --copy-files",
-		"watch": "babel src --out-dir lib --source-maps --copy-files --watch"
+		"watch": "npm run build -- --watch"
 	},
 	"lint-staged": {
 		"*.js": [

`src/HtmlWebpackExternalsPlugin.js`

Show changes

@@ -2,44 +2,49 @@ import CopyWebpackPlugin from 'copy-webpack-plugin'
 import HtmlWebpackIncludeAssetsPlugin from 'html-webpack-include-assets-plugin'
 import Ajv from 'ajv'
 
-const ajv = new Ajv()
-const validateConfig = ajv.compile({
-	type: 'object',
-	properties: {
-		externals: {
-			type: 'array',
-			items: {
-				type: 'object',
-				properties: {
-					module: { type: 'string' },
-					entry: {
-						type: ['string', 'array'],
-						items: { type: 'string' },
-						minItems: 1,
-					},
-					global: { type: ['string', 'null'] },
-					supplements: {
-						type: 'array',
-						items: { type: 'string' },
+export default class HtmlWebpackExternalsPlugin {
+	static validateArguments = (() => {
+		const ajv = new Ajv()
+		const validateConfig = ajv.compile({
+			type: 'object',
+			properties: {
+				externals: {
+					type: 'array',
+					items: {
+						type: 'object',
+						properties: {
+							module: { type: 'string' },
+							entry: {
+								type: ['string', 'array'],
+								items: { type: 'string' },
+								minItems: 1,
+							},
+							global: { type: ['string', 'null'] },
+							supplements: {
+								type: 'array',
+								items: { type: 'string' },
+							},
+							append: { type: 'boolean' },
+						},
+						required: ['module', 'entry'],
 					},
-					append: { type: 'boolean' },
+					minItems: 1,
 				},
-				required: ['module', 'entry'],
+				hash: { type: 'boolean' },
+				outputPath: { type: 'string' },
+				publicPath: { type: ['string', 'null'] },
 			},
-			minItems: 1,
-		},
-		hash: { type: 'boolean' },
-		outputPath: { type: 'string' },
-	},
-	required: ['externals'],
-})
+			required: ['externals'],
+		})
 
-export default class HtmlWebpackExternalsPlugin {
-	static validateArguments(config) {
-		if (!validateConfig(config)) {
-			throw new TypeError(ajv.errorsText(validateConfig.errors))
+		return config => {
+			if (!validateConfig(config)) {
+				throw new TypeError(ajv.errorsText(validateConfig.errors))
+			}
 		}
-	}
+	})()
+
+	static URL_ENTRY = /^(http:|https:)?\/\//
 
 	constructor(config) {
 		HtmlWebpackExternalsPlugin.validateArguments(config)
@@ -49,17 +54,30 @@ export default class HtmlWebpackExternalsPlugin {
 		this.assetsToCopy = []
 		this.externals = {}
 
-		const { externals, hash = false, outputPath = 'vendor' } = config
+		const {
+			externals,
+			hash = false,
+			outputPath = 'vendor',
+			publicPath = null,
+		} = config
 		this.hash = hash
 		this.outputPath = outputPath
+		this.publicPath = publicPath
 
 		externals.forEach(
 			({ module, entry, global = null, supplements = [], append = false }) => {
 				this.externals[module] = global
 
-				const entries = (Array.isArray(entry) ? entry : [entry]).map(
-					entry => \`${module}/${entry}\`
-				)
+				const localEntries = []
+
+				const entries = (Array.isArray(entry) ? entry : [entry]).map(entry => {
+					if (HtmlWebpackExternalsPlugin.URL_ENTRY.test(entry)) {
+						return entry
+					}
+					const localEntry = \`${module}/${entry}\`
+					localEntries.push(localEntry)
+					return localEntry
+				})
 
 				if (append) {
 					this.assetsToAppend = [...this.assetsToAppend, ...entries]
@@ -69,7 +87,7 @@ export default class HtmlWebpackExternalsPlugin {
 
 				this.assetsToCopy = [
 					...this.assetsToCopy,
-					...entries,
+					...localEntries,
 					...supplements.map(asset => \`${module}/${asset}\`),
 				]
 			}
@@ -88,6 +106,11 @@ export default class HtmlWebpackExternalsPlugin {
 			}
 		}
 
+		const publicPath =
+			this.publicPath == null
+				? compiler.options.output.publicPath
+				: this.publicPath
+
 		const pluginsToApply = []
 
 		pluginsToApply.push(
@@ -99,29 +122,26 @@ export default clas...

Assets 2

16 Sep 01:40

mmiller42

v3.0.0

729a746

v3.0.0

What's New in v3.0.0

This is a summary of the differences between v3.0.0 and v2.2.3.

Commits

Show commits

SHA	Author	Message
`e571e48`	mmiller42	Starting from scratch
`8ef5f07`	mmiller42	Bootstrapping
`89e94db`	mmiller42	Initial concept
`d880fe5`	mmiller42	It works!
`b23be30`	mmiller42	Documentation and minor fixes
`bdefdb6`	mmiller42	Match description
`729a746`	mmiller42	Remove unused package

Changed files

➕ `.babelrc`

Show changes

@@ -0,0 +1,17 @@
+{
+	"presets": [
+		[
+			"babel-preset-env",
+			{
+				"targets": {
+					"node": "4.3.0"
+				}
+			}
+		]
+	],
+	"plugins": [
+		"babel-plugin-add-module-exports",
+		"babel-plugin-transform-class-properties",
+		"babel-plugin-transform-object-rest-spread"
+	]
+}

➕ `.editorconfig`

Show changes

@@ -0,0 +1,10 @@
+root = true
+
+[src/**.js]
+indent_style = tab
+indent_size = tab
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+max_line_length = 80

`.gitignore`

Show changes

@@ -1,46 +1,16 @@
-# Logs
-logs
-*.log
-npm-debug.log*
-
-# Runtime data
-pids
-*.pid
-*.seed
-npm-debug.log
-
-# Directory for instrumented libs generated by jscoverage/JSCover
-lib-cov
-
-# Coverage directory used by tools like istanbul
-coverage
-
-# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
-.grunt
-
-# node-waf configuration
-.lock-wscript
-
-# Compiled binary addons (http://nodejs.org/api/addons.html)
-build/
+# OS/IDE files
+.DS_Store
+*#
+*~
+.idea
 
-# Dependency directory
-# https://docs.npmjs.com/misc/faq#should-i-check-my-node-modules-folder-into-git
+# Dependencies
 node_modules
 
-# Optional npm cache directory
-.npm
-
-# Optional REPL history
+# Logs
+*.log
 .node_repl_history
 .node_history
 
-# Redis dumps
-dump.rdb
-
-# IDE and OS files
-.idea
-.tmp
-*#
-*~
-.DS_Store
+# Build files
+lib

`LICENSE`

Show changes

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2016 Matt Miller
+Copyright (c) 2017 Matt Miller
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

➖ `README.ZH-CN.md`

Show changes

@@ -1,219 +0,0 @@
-# html-webpack-externals-plugin
-
-本插件提供基本接口加载第三方依赖库增强了[html-webpack-plugin](https://github.com/ampedandwired/html-webpack-plugin)的不足。
-
-Webpack的开发者们建议在开发过程、构建过程中单独加载第三方依赖库来提升编译速度，以极大的利用浏览器的缓存能力。
-
-本插件允许使用以下2种方式加载第三方css，js 依赖：
-
-* **Absolute URLs.** 这种方式让你更好的利用浏览器的缓存以及CDN带来的好处。在这种情况中，不需要在package.json文件中添加这些依赖，但是依然需要通过require/import声明引入。与URLs对应的script，link标签，也即js和css会被附件到HTML文件。
-* **Local module dist files.** 这种方式让你直接使用本地依赖文件，而不是把它们打包在一起。在构建时，对应路径的配置列表会被从node_modules目录拷贝到HTML中，同理js文件用script标签，css用link标签。
-
-## 安装
-
-\`\`\`sh
-npm install html-webpack-externals-plugin --save-dev
-\`\`\`
-
-## 使用
-
-### 基本例子
-添加到Webpack 配置文件中的\`plugins\`数组中，并放在\`HtmlWebpackPlugin\`后面，实际使用中发现貌似放在前面也可以。
-
-\`\`\`js
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-const HtmlWebpackExternalsPlugin = require('html-webpack-externals-plugin');
-
-module.exports = {
-  // ...your Webpack config
-  plugins: [
-    new HtmlWebpackPlugin(),
-    new HtmlWebpackExternalsPlugin(
-      // See the API section
-    );
-  ]
-};
-\`\`\`
-使用这个插件时，不需要再在Webpack配置文件中定义 \`externals\`。插件会在运行时写入。
-
-### 更加详细的例子
-
-\`\`\`js
-//webpack.config.js
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-const HtmlWebpackExternalsPlugin = require('html-webpack-externals-plugin');
-
-module.exports = {
-  // ...your Webpack config
-  plugins: [
-    new HtmlWebpackPlugin({
-      filename: 'index.html',
-      template: 'path.to.html.template.name'),
-      lib: ['jquery', 'd3', 'bootstrap.css'],
-      chunks: ['entry-name']
-    }),
-    new HtmlWebpackExternalsPlugin(
-        [
-          {
-              name: 'jquery',
-              var: 'jQuery',
-              path: './jquery/jquery-3.1.1.js'
-          },
-          {
-              name: 'd3',
-              var: 'd3',
-              path: './d3/d3.min.js'
-          },
-          {
-              name: 'Highcharts',
-              var: 'Highcharts',
-              path: './highcharts-5.0.4/highcharts.js'
-          },
-          {
-              name: 'HighchartsMore',
-              var: 'Highcharts',
-              path: './highcharts-5.0.4/highcharts-more.js'
-          },
-          {
-              name: 'bootstrap.css',
-              path: './bootstrap-3.3.7/css/bootstrap.min.css'
-          },
-      ], 
-      {
-          basedir: 'path.to.your.lib.basedir',
-          dest: 'lib'
-      }
-    );
-  ]
-};
-\`\`\`
-
-\`\`\`js
-//输出的html
-//entry.css 是在名为 'entry' 的chunk（entry对应的js文件）里被引入的
-<!-- index.html -->
-<!DOCTYPE HTML>
-<html lang="zh-CN">
-<head>
-  <meta charset="UTF-8">
-  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
-  <meta name="renderer" content="webkit">
-  <title>XXX</title>
-<link href="lib/bootstrap-3.3.7/css/bootstrap.min.css" rel="stylesheet"><link href="./css/entry.css" rel="stylesheet"></head>
-<body>
-<button id="btn">test</button>
-
-<div id="industryMap"></div>
-<script type="text/javascript" src="lib/jquery/jquery-3.1.1.js"></script><script type="text/javascript" src="lib/d3/d3.min.js"></script><script type="text/javascript" src="./js/entry.js"></script></body>
-</html> 
-\`\`\`
-#### 注意: 插件只会从 HtmlWebpackPlugin 的配置对象中读取 'lib' 属性。如果 'lib' 没有被定义，则在 HtmlWebpackExternalsPlugin 中配置的全部依赖会被附加到 HTML 中。
-
-## API
-
-### new HtmlWebpackExternalsPlugin(externals, options)
-
-#### externals
-
-一个对象数组，每一个对象代表一个外部依赖。每一个对象会包含如下的属性。
-
-\`\`\`js
-[
-  {
-    // 依赖的名称，即被传递到 \`require()\` 或者 \`import\` 声明中的那个名称
-    name: 'react',
-    // JS 库在 \`window\` 对象中暴露的那个变量名称。 比如 \`jQuery\` or \`React\`。
-    // 如果依赖库中没有暴露任何值（比如CSS文件，不需要暴露一个全局变量），省略这个属性也可以。
-    var: 'React',
-    // 用于从 CDN 加载依赖的绝对路径
-    url: 'https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react.js'
-  },
-  {
-    name: 'react',
-    var: 'React',
-    // 可选地，你可以指定你的项目目录下的 \`node_modules\` 目录下的一个目录。
-    //webpack会在构建时拷贝到输出（'build'属性）目录
-    path: 'react/dist/react.min.js'
-  }
-]
-\`\`\`
-
-#### options
-
-一个对象，包含了插件需要的属性。这个配置只会应用到从本地目录中读取依赖的情况。（即使用 \`path\` 而不是 \`url\`）
-
-\`\`\`js
-{
-  // 会被解析成本地依赖文件的绝对路径。通常为项目的根目录。用于加载本地依赖。 大多数情况下可以使用 \`__dirname\`
-  basedir: __dirname,
-  // 拷贝本地依赖到 build 目录的那个目录名称。默认为 'vendor'
-  // \`'vendor'\`.
-  dest: 'vendor'
-}
-\`\`\`
-
-## 例子
-
-### webpack.config.js
-
-\`\`\`js
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-const HtmlWebpackExternalsPlugin = require('html-webpack-externals-plugin');
-
-module.exports = {
-  // ...your Webpack config
-  plugins: [
-    new HtmlWebpackPlugin(),
-    new HtmlWebpackExternalsPlugin(
-      [
-        // Using a CDN for a JS library
-        {
-          name: 'jquery',
-          var: 'jQuery',
-          url: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.js'
-        },
-        // Using a locally installed module for a JS library
-        {
-          name: 'react',
-          var: 'React',
-          path: 'react/dist/react.min.js'
-        },
-        // Using a CDN for a library with no export (e.g. a CSS module)
-        {
-          name: 'bootstrap.css',
-          url: 'https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.css'
-        }
-      ],
-      {
-        // 本地依赖的相对路径
-        basedir: __dirname
-      }
-    );
-  ]
-};
-\`\`\`
-
-### index.jsx
-
-\`\`\`js
-import React, {Component} from 'react';
-import $ from 'jquery';
-// 不需要 import 'bootstrap.css'， 因为已经被添加到 html 中了
-\`\`\`
-
-注意因为它们是外部依赖，所以它们总是只会被加载一次，不管你是否在你自己的代码中多处使用。意思就是说没必要再在 ...

Assets 2

Releases: mmiller42/html-webpack-externals-plugin

v3.3.3

Commits

Changed files

➕ .npmignore

v3.3.2

Commits

Changed files

v3.3.1

Commits

Changed files

v3.3.0

Commits

Changed files

v3.2.0

Commits

Changed files

➖ ROADMAP.md

v3.1.0

Commits

Changed files

➕ ROADMAP.md

v3.0.0

Commits

Changed files

➕ .babelrc

➕ .editorconfig

➖ README.ZH-CN.md

➕ `.npmignore`

➖ `ROADMAP.md`

➕ `ROADMAP.md`

➕ `.babelrc`

➕ `.editorconfig`

➖ `README.ZH-CN.md`