{"id":13439129,"url":"https://github.com/mmiller42/html-webpack-externals-plugin","last_synced_at":"2025-03-20T07:32:04.807Z","repository":{"id":57267724,"uuid":"67832847","full_name":"mmiller42/html-webpack-externals-plugin","owner":"mmiller42","description":"Webpack plugin that works alongside html-webpack-plugin to use pre-packaged vendor bundles.","archived":true,"fork":false,"pushed_at":"2021-01-07T23:27:48.000Z","size":503,"stargazers_count":99,"open_issues_count":19,"forks_count":16,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-03-20T05:07:14.066Z","etag":null,"topics":["externals","html-webpack-plugin","webpack","webpack-plugin"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mmiller42.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-09-09T21:08:42.000Z","updated_at":"2024-05-29T02:07:15.000Z","dependencies_parsed_at":"2022-08-26T12:33:14.042Z","dependency_job_id":null,"html_url":"https://github.com/mmiller42/html-webpack-externals-plugin","commit_stats":null,"previous_names":[],"tags_count":26,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mmiller42%2Fhtml-webpack-externals-plugin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mmiller42%2Fhtml-webpack-externals-plugin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mmiller42%2Fhtml-webpack-externals-plugin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mmiller42%2Fhtml-webpack-externals-plugin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mmiller42","download_url":"https://codeload.github.com/mmiller42/html-webpack-externals-plugin/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244570868,"owners_count":20474140,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["externals","html-webpack-plugin","webpack","webpack-plugin"],"created_at":"2024-07-31T03:01:11.386Z","updated_at":"2025-03-20T07:31:59.799Z","avatar_url":"https://github.com/mmiller42.png","language":"JavaScript","readme":"# html-webpack-externals-plugin [![CircleCI](https://circleci.com/gh/mmiller42/html-webpack-externals-plugin.svg?style=svg)](https://circleci.com/gh/mmiller42/html-webpack-externals-plugin)\n\n## 🚨 DEPRECATED 🚨\n\nSorry, this module is no longer maintained, and its functionality is baked into wonderful plugins by jharris4, [html-webpack-tags-plugin](https://github.com/jharris4/html-webpack-tags-plugin) and [html-webpack-deploy-plugin](https://github.com/jharris4/html-webpack-deploy-plugin).\n\nYou're likely to run into issues with it and it has not been used with recent Webpack projects.\n\n---\n\nWebpack plugin that works alongside [`html-webpack-plugin`](https://github.com/jantimon/html-webpack-plugin) to use pre-packaged vendor bundles.\n\n## How it works\n\nThis plugin is very simple and just encapsulates two other Webpack plugins to do the heavy lifting. It:\n\n1. modifies your Webpack config at runtime to add your vendor modules to the [`externals`](https://webpack.js.org/configuration/externals/) property.\n1. runs the [`copy-webpack-plugin`](https://github.com/kevlened/copy-webpack-plugin) to copy your vendor module assets into the output path.\n1. runs the [`html-webpack-include-assets-plugin`](https://github.com/jharris4/html-webpack-include-assets-plugin) to add your vendor module bundles to the HTML output.\n\n## Installation\n\n```sh\nnpm install --save-dev html-webpack-externals-plugin\n```\n\n## Usage\n\nRequire the plugin in your Webpack config file.\n\n```js\nconst HtmlWebpackExternalsPlugin = require('html-webpack-externals-plugin')\n```\n\nThen instantiate it in the `plugins` array, after your instance of `html-webpack-plugin`.\n\n```js\nplugins: [\n  new HtmlWebpackPlugin(),\n  new HtmlWebpackExternalsPlugin(\n    // See API section\n  ),\n]\n```\n\n## API\n\nThe constructor takes a configuration object with the following properties.\n\n| Property | Type | Description | Default |\n| --- | --- | --- | --- |\n| `externals` | array\u0026lt;object\u0026gt; | 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* |\n| `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* |\n| `externals[].entry` | string \\| array\u0026lt;string\u0026gt; \\| object \\| array\u0026lt;object \\| string\u0026gt; | 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 `//`.\u003cbr\u003e\u003cbr\u003eFor 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* |\n| `externals[].entry.path` | string | If entry is an object, the path to the asset. | *None* |\n| `externals[].entry.type` | `'js'`\\|`'css'` | The asset type, if it cannot be inferred. | *Inferred by extension when possible* |\n| `externals[].entry`\u003cbr\u003e`  .cwpPatternConfig` | object | The properties to set on the [`copy-webpack-plugin` pattern object](https://github.com/webpack-contrib/copy-webpack-plugin#patterns). This object is merged in with the default `from` and `to` properties which are generated by the externals plugin. | `{}` |\n| `externals[].entry`\u003cbr\u003e`  .attributes` | object.\u0026lt;string,string\u0026gt; | Additional attributes to add to the injected tag. | `{}` |\n| `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` |\n| `externals[].supplements` | array\u0026lt;string\u0026gt; \\| array\u0026lt;object\u0026gt; | 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/`. Supplements can be specified as just an array of paths, or an array of objects with a path and copy plugin pattern object. | `[]` |\n| `externals[].supplements[]`\u003cbr\u003e`  .path` | string | The glob path to copy assets from. | *None* |\n| `externals[].supplements[]`\u003cbr\u003e`  .cwpPatternConfig` | object | The properties to set on the [`copy-webpack-plugin` pattern object](https://github.com/webpack-contrib/copy-webpack-plugin#patterns). This object is merged in with the default `from` and `to` properties which are generated by the externals plugin. | `{}` |\n| `externals[].append` | boolean | Set to true to inject this module after your Webpack bundles. | `false` |\n| `hash` | boolean | Set to true to append the injected module distro paths with a unique hash for cache-busting. | `false` |\n| `outputPath` | string | The path (relative to your Webpack `outputPath`) to store externals copied over by this plugin. | `vendor` |\n| `publicPath` | string \\| null | Override Webpack config's `publicPath` for the externals files, or `null` to use the default `output.publicPath` value. | `null` |\n| `files` | string \\| array\u0026lt;string\u0026gt; \\| 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` |\n| `cwpOptions` | object | The [options object](https://github.com/webpack-contrib/copy-webpack-plugin#options) to pass as the `copy-webpack-plugin` constructor's second parameter. | `{}` |\n| `enabled` | boolean | Set to `false` to disable the plugin (useful for disabling in development mode). | `true` |\n\n## Examples\n\n### Local JS external example\n\nThis example assumes `jquery` is installed in the app. It:\n\n1. 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)\n1. copies `node_modules/jquery/dist/jquery.min.js` to `\u003coutput path\u003e/vendor/jquery/dist/jquery.min.js`\n1. adds `\u003cscript type=\"text/javascript\" src=\"\u003cpublic path\u003e/vendor/jquery/dist/jquery.min.js\"\u003e\u003c/script\u003e` to your HTML file, before your chunks\n\n```js\nnew HtmlWebpackExternalsPlugin({\n  externals: [\n    {\n      module: 'jquery',\n      entry: 'dist/jquery.min.js',\n      global: 'jQuery',\n    },\n  ],\n})\n```\n\n### Local CSS external example\n\nThis example assumes `bootstrap` is installed in the app. It:\n\n1. copies `node_modules/bootstrap/dist/css/bootstrap.min.css` to `\u003coutput path\u003e/vendor/bootstrap/dist/css/bootstrap.min.css`\n1. adds `\u003clink href=\"\u003cpublic path\u003e/vendor/bootstrap/dist/css/bootstrap.min.css\" rel=\"stylesheet\"\u003e` to your HTML file, before your chunks\n\n```js\nnew HtmlWebpackExternalsPlugin({\n  externals: [\n    {\n      module: 'bootstrap',\n      entry: 'dist/css/bootstrap.min.css',\n    },\n  ],\n})\n```\n\n### Local external with supplemental assets example\n\nThis example assumes `bootstrap` is installed in the app. It:\n\n1. copies `node_modules/bootstrap/dist/css/bootstrap.min.css` to `\u003coutput path\u003e/vendor/bootstrap/dist/css/bootstrap.min.css`\n1. copies all contents of `node_modules/bootstrap/dist/fonts/` to `\u003coutput path\u003e/vendor/bootstrap/dist/fonts/`\n1. adds `\u003clink href=\"\u003cpublic path\u003e/vendor/bootstrap/dist/css/bootstrap.min.css\" rel=\"stylesheet\"\u003e` to your HTML file, before your chunks\n\n```js\nnew HtmlWebpackExternalsPlugin({\n  externals: [\n    {\n      module: 'bootstrap',\n      entry: 'dist/css/bootstrap.min.css',\n      supplements: ['dist/fonts/'],\n    },\n  ],\n})\n```\n\n### CDN example\n\nThis example does not require the `jquery` module to be installed. It:\n\n1. 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)\n1. adds `\u003cscript type=\"text/javascript\" src=\"https://unpkg.com/jquery@3.2.1/dist/jquery.min.js\"\u003e\u003c/script\u003e` to your HTML file, before your chunks\n\n```js\nnew HtmlWebpackExternalsPlugin({\n  externals: [\n    {\n      module: 'jquery',\n      entry: 'https://unpkg.com/jquery@3.2.1/dist/jquery.min.js',\n      global: 'jQuery',\n    },\n  ],\n})\n```\n\n### URL without implicit extension example\n\nSome 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.\n\nThis example uses the Google Fonts API to load the Roboto font. It:\n\n1. adds `\u003clink href=\"https://fonts.googleapis.com/css?family=Roboto\" rel=\"stylesheet\"\u003e` to your HTML file, before your chunks\n\n```js\nnew HtmlWebpackExternalsPlugin({\n  externals: [\n    {\n      module: 'google-roboto',\n      entry: {\n        path: 'https://fonts.googleapis.com/css?family=Roboto',\n        type: 'css',\n      },\n    },\n  ],\n})\n```\n\n### Module with multiple entry points example\n\nSome modules require more than one distro file to be loaded. For example, Bootstrap has a normal and a theme CSS entry point.\n\nThis example assumes `bootstrap` is installed in the app. It:\n\n1. copies `node_modules/bootstrap/dist/css/bootstrap.min.css` to `\u003coutput path\u003e/vendor/bootstrap/dist/css/bootstrap.min.css`\n1. copies `node_modules/bootstrap/dist/css/bootstrap-theme.min.css` to `\u003coutput path\u003e/vendor/bootstrap/dist/css/bootstrap-theme.min.css`\n1. copies all contents of `node_modules/bootstrap/dist/fonts/` to `\u003coutput path\u003e/vendor/bootstrap/dist/fonts/`\n1. adds `\u003clink href=\"\u003cpublic path\u003e/vendor/bootstrap/dist/css/bootstrap.min.css\" rel=\"stylesheet\"\u003e` to your HTML file, before your chunks\n1. adds `\u003clink href=\"\u003cpublic path\u003e/vendor/bootstrap/dist/css/bootstrap-theme.min.css\" rel=\"stylesheet\"\u003e` to your HTML file, before your chunks\n\n```js\nnew HtmlWebpackExternalsPlugin({\n  externals: [\n    {\n      module: 'bootstrap',\n      entry: ['dist/css/bootstrap.min.css', 'dist/css/bootstrap-theme.min.css'],\n      supplements: ['dist/fonts/'],\n    },\n  ],\n})\n```\n\n### Appended assets example\n\nSometimes you want to load the external after your Webpack chunks instead of before.\n\nThis example assumes `bootstrap` is installed in the app. It:\n\n1. copies `node_modules/bootstrap/dist/css/bootstrap.min.css` to `\u003coutput path\u003e/vendor/bootstrap/dist/css/bootstrap.min.css`\n1. adds `\u003clink href=\"\u003cpublic path\u003e/vendor/bootstrap/dist/css/bootstrap.min.css\" rel=\"stylesheet\"\u003e` to your HTML file, *after* your chunks\n\n```js\nnew HtmlWebpackExternalsPlugin({\n  externals: [\n    {\n      module: 'bootstrap',\n      entry: 'dist/css/bootstrap.min.css',\n      append: true,\n    },\n  ],\n})\n```\n\n### Cache-busting with hashes example\n\nYou can configure the plugin to append hashes to the query string on the HTML tags so that, when upgrading modules, a new hash is computed, busting your app users' caches. **Do not use this in tandem with CDNs, only when using local externals.**\n\nThis example assumes `bootstrap` is installed in the app. It:\n\n1. copies `node_modules/bootstrap/dist/css/bootstrap.min.css` to `\u003coutput path\u003e/vendor/bootstrap/dist/css/bootstrap.min.css`\n1. adds `\u003clink href=\"\u003cpublic path\u003e/vendor/bootstrap/dist/css/bootstrap.min.css?\u003cunique hash\u003e\" rel=\"stylesheet\"\u003e` to your HTML file, before your chunks\n\n```js\nnew HtmlWebpackExternalsPlugin({\n  externals: [\n    {\n      module: 'bootstrap',\n      entry: 'dist/css/bootstrap.min.css',\n    },\n  ],\n  hash: true,\n})\n```\n\n### Customizing output path example\n\nBy default, local externals are copied into the Webpack output directory, into a subdirectory called `vendor`. This is configurable.\n\nDo not include a trailing slash or leading slash in your output path, they are concatenated automatically by the plugin.\n\nThis example assumes `bootstrap` is installed in the app. It:\n\n1. copies `node_modules/bootstrap/dist/css/bootstrap.min.css` to `\u003coutput path\u003e/thirdparty/bootstrap/dist/css/bootstrap.min.css`\n1. adds `\u003clink href=\"\u003cpublic path\u003e/thirdparty/bootstrap/dist/css/bootstrap.min.css\" rel=\"stylesheet\"\u003e` to your HTML file, before your chunks\n\n```js\nnew HtmlWebpackExternalsPlugin({\n  externals: [\n    {\n      module: 'bootstrap',\n      entry: 'dist/css/bootstrap.min.css',\n    },\n  ],\n  outputPath: 'thirdparty',\n})\n```\n\n### Customizing public path example\n\nBy default, local externals are resolved from the same root path as your Webpack configuration file's `output.publicPath`, concatenated with the `outputPath` variable. This is configurable.\n\nYou should include a trailing slash in your public path, and a leading slash if you want it to resolve assets from the domain root.\n\nThis example assumes `bootstrap` is installed in the app. It:\n\n1. copies `node_modules/bootstrap/dist/css/bootstrap.min.css` to `\u003coutput path\u003e/vendor/bootstrap/dist/css/bootstrap.min.css`\n1. adds `\u003clink href=\"/assets/vendor/bootstrap/dist/css/bootstrap.min.css\" rel=\"stylesheet\"\u003e` to your HTML file, before your chunks\n\n```js\nnew HtmlWebpackExternalsPlugin({\n  externals: [\n    {\n      module: 'bootstrap',\n      entry: 'dist/css/bootstrap.min.css',\n    },\n  ],\n  publicPath: '/assets/',\n})\n```\n\n### Adding custom attributes to tags example\n\nSometimes you may want to add custom attributes to the link or script tags that are injected.\n\nThis example does not require the `jquery` module to be installed. It:\n\n1. 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)\n1. adds `\u003cscript type=\"text/javascript\" src=\"https://code.jquery.com/jquery-3.2.1.js\" integrity=\"sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=\" crossorigin=\"anonymous\"\u003e\u003c/script\u003e` to your HTML file, before your chunks\n\n```js\nnew HtmlWebpackExternalsPlugin({\n  externals: [\n    {\n      module: 'jquery',\n      entry: {\n        path: 'https://code.jquery.com/jquery-3.2.1.js',\n        attributes: {\n          integrity: 'sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=',\n          crossorigin: 'anonymous',\n        },\n      },\n      global: 'jQuery',\n    },\n  ],\n})\n```\n\n### Passing an options argument to the `copy-webpack-plugin` constructor example\n\nYou can change the default context for all patterns that are copied by the `copy-webpack-plugin`, enable debug mode, etc. by passing additional options to the plugin.\n\nThis example assumes `bootstrap` is installed in the app via bower. It:\n\n1. copies `bower_components/bootstrap/dist/css/bootstrap.min.css` to `\u003coutput path\u003e/vendor/bootstrap/dist/css/bootstrap.min.css`\n1. adds `\u003clink href=\"\u003cpublic path\u003e/vendor/bootstrap/dist/css/bootstrap.min.css\" rel=\"stylesheet\"\u003e` to your HTML file, before your chunks\n\n```js\nnew HtmlWebpackExternalsPlugin({\n  externals: [\n    {\n      module: 'bootstrap',\n      entry: 'dist/css/bootstrap.min.css',\n    },\n  ],\n  cwpOptions: {\n    context: path.resolve(__dirname, 'bower_components'),\n  },\n})\n```\n\n### Passing custom options to `copy-webpack-plugin` for an entry example\n\nIn certain instances, you might want to control the properties that are passed in with the pattern object provided to `copy-webpack-plugin`, in order to control context, caching, output path, etc.\n\nThis example assumes `bootstrap` is installed in the app via bower. It:\n\n1. copies `bower_components/bootstrap/dist/css/bootstrap.min.css` to `\u003coutput path\u003e/vendor/bootstrap/dist/css/bootstrap.min.css`\n1. adds `\u003clink href=\"/assets/vendor/bootstrap/dist/css/bootstrap.min.css\" rel=\"stylesheet\"\u003e` to your HTML file, before your chunks\n\n```js\nnew HtmlWebpackExternalsPlugin({\n  externals: [\n    {\n      module: 'bootstrap',\n      entry: {\n        path: 'dist/css/bootstrap.min.css',\n        cwpPatternConfig: {\n          context: path.resolve(__dirname, 'bower_components'),\n        },\n      },\n    },\n  ],\n})\n```\n\n### Passing custom options to `copy-webpack-plugin` for a supplement example\n\nIn certain instances, you might want to control the properties that are passed in with the pattern object provided to `copy-webpack-plugin`, in order to control context, caching, output path, etc.\n\nThis example assumes `./mod` is a directory in your app that contains some dist files.\n\n1. copies `mod/dist/mod.css` to `\u003coutput path\u003e/vendor/mod/dist/mod.css`\n1. copies all contents of `mod/dist/{a,b}/` to `\u003coutput path\u003e/vendor/mod/dist/{a,b}/`, passing `nobrace` to `node-glob` so that `{a,b}` is matched literally instead of expanded into a glob\n1. adds `\u003clink href=\"\u003cpublic path\u003e/vendor/bootstrap/dist/css/bootstrap.min.css\" rel=\"stylesheet\"\u003e` to your HTML file, before your chunks\n\n```js\nnew HtmlWebpackExternalsPlugin({\n  externals: [\n    {\n      module: 'mod',\n      entry: 'dist/mod.css',\n      supplements: [\n        {\n          path: 'dist/{a,b}/',\n          cwpPatternConfig: {\n            fromArgs: {\n              nobrace: true,\n            },\n          },\n        },\n      ],\n    },\n  ],\n  cwpOptions: {\n    context: __dirname,\n  },\n})\n```\n\n### Specifying which HTML files to affect example\n\nIf you are using multiple instances of html-webpack-plugin, by default the assets will be injected into every file. This is configurable.\n\nThis example assumes `bootstrap` is installed in the app. It:\n\n1. copies `node_modules/bootstrap/dist/css/bootstrap.min.css` to `\u003coutput path\u003e/vendor/bootstrap/dist/css/bootstrap.min.css`\n1. adds `\u003clink href=\"/public/vendor/bootstrap/dist/css/bootstrap.min.css\" rel=\"stylesheet\"\u003e` to *only the `about.html` file*, before your chunks\n\n```js\nnew HtmlWebpackExternalsPlugin({\n  externals: [\n    {\n      module: 'bootstrap',\n      entry: 'dist/css/bootstrap.min.css',\n    },\n  ],\n  files: ['about.html'],\n})\n```\n\n### Disabling the plugin\n\nSometimes you only want the plugin to be activated in certain environments. Rather than create separate Webpack configs or mess with splicing the plugins array, simply set the `enabled` option to `false` to disable the externals plugin entirely.\n\n```js\nnew HtmlWebpackExternalsPlugin({\n  externals: [\n    {\n      module: 'jquery',\n      entry: 'dist/jquery.min.js',\n      global: 'jQuery',\n    },\n  ],\n  enabled: process.env.NODE_ENV === 'production',\n})\n```\n","funding_links":[],"categories":["HarmonyOS"],"sub_categories":["Windows Manager"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmmiller42%2Fhtml-webpack-externals-plugin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmmiller42%2Fhtml-webpack-externals-plugin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmmiller42%2Fhtml-webpack-externals-plugin/lists"}