Package Exports

html-webpack-deploy-plugin

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (html-webpack-deploy-plugin) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Deploy Assets extension for the HTML Webpack Plugin

Enhances html-webpack-plugin functionality by allowing you to specify local files or node_modules packages that should be injected as html tags into your html template.

Installation

$ npm install --save-dev html-webpack-deploy-plugin

You must be running Node 8.6 or higher for version 2.x of this plugin.
This plugin was renamed from html-webpack-deploy-assets-plugin to html-webpack-deploy-plugin in version 2.x.
For use with the Node < 8.6 please use version 1.x (old README here)

Configuration

Default Options

This plugin will run and do nothing if no options are provided.

The default options for this plugin are shown below:

const path = require('path');

const DEFAULT_OPTIONS = {
  append: false,
  assets: {},
  packages: {},
  addAssetPath: assetPath => path.join('assets', assetPath),
  addPackagePath: (packageName, packageVersion, packagePath) => path.join('packages', packageName + '-' + packageVersion, packagePath),
  findPackagePath: (cwd, packageName) => findUp.sync(slash(path.join('node_modules', packageName)), { cwd }),
  useCdn: false,
  getCdnPath: (packageName, packageVersion, packagePath) => `https://unpkg.com/${packageName}@${packageVersion}/${packagePath}`
};

Options

All options for this plugin are validated as soon as the plugin is instantiated.

The available options are:

Name	Type	Default	Description
`append`	`{Boolean}`	`false`	Whether to prepend or append the injected tags relative to any existing tags (should be set to false when using any `script` tag asset `external`)
`assets`	`{Object}`	`undefined`	The local assets to copy into the webpack output directory and inject into the template html file
`packages`	`{Object}`	`undefined`	The `node_modules` packages to copy into the webpack output directory and inject into the template html file
`addAssetPath`	`{Function}`	`see above`	The function to call to get the output path for `assets` when copying and injecting them
`addPackagePath`	`{Function}`	`see above`	The function to call to get the output path for `packages` when copying and injecting them
`useCdn`	`{Boolean}`	`false`	Whether or not to use the `getCdnPath` to replace the asset paths with their `cdn urls`
`getCdnPath`	`{Function}`	`see above`	The function to use when replacing asset paths with `cdn urls`

The assets option can be used to specify local assets that should be copied to the webpack output directory and injected into the index.html as tags.

This option requires an object with any of the copy, links, or scripts properties.

The settings for these are based on the copy-webpack-plugin and the html-webpack-tags-plugin

For example, to copy some assets to webpack, and insert a \<link\> and \<script\> tag:

const pluginOptions = {
  assets: {
    copy: [
      { from: 'src-path/assets', to: 'dst-path/assets' },
      { from: 'src-path/js', to: 'dst-path/js' }
      { from: 'src-path/css/src-file.png', to: 'dst-path/dst-file.png' }
    ],
    links: [
      { path: 'dst-path/dst-file.png', attributes: { rel: 'icon' }
    ],
    scripts: [
      { path: 'dst-path/js/script.js', }
    ]
  }
};

The above example will generate something like the following html:

<head>
  <link href="${webpack.publicPath}dst-path/dst-file.png" rel="icon">
</head>
<body>
  <script src="${webpack.publicPath}dst-path/js/script.js"></script>
</body>

The packages option can be used to specify package assets that should be copied to the webpack output directory and injected into the index.html as tags.

This option requires an object with any of the copy, links, or scripts properties.

The settings for these are based on the copy-webpack-plugin and the html-webpack-tags-plugin

For example, to copy some assets from bootstrap to webpack, and insert a \<link\> and \<script\> tag for bootstrap:

const pluginOptions = {
  packages: {
    'bootstrap': {
      copy: [
        { from: 'dist/css', to: 'css/' },
        { from: 'dist/js', to: 'js/' }
      ],
      links: [
        'css/bootstrap.min.css'
      ],
      scripts: {
        variableName: 'Bootstrap',
        path: 'js/bootstrap.bundle.min.js'
      }
    }
  }
};

The variableName can be used to tell webpack to stop bundling a package, and instead load it from the injected \<script\>.

The above example will generate something like the following html:

<head>
  <link href="${webpack.publicPath}css/bootstrap.min.css">
</head>
<body>
  <script src="${webpack.publicPath}js/bootstrap.bundle.min.js"></script>
</body>

Examples

Deploying bootstrap css and fonts and an assets directory from local files:

plugins: [
  new HtmlWebpackPlugin(),
  new HtmlWebpackDeployAssetsPlugin({
    packages: {
      "bootstrap": {
        copy: [
          { from: "dist/css", to: "css/" },
          { from: "dist/fonts", to: "fonts/" }
        ],
        links: [
          "css/bootstrap.min.css",
          "css/bootstrap-theme.min.css"
        ]
      }
    },
    assets: {
      copy: [
        { from: "src/assets", to: "assets/" }
      ],
      links: {
        "href": "/assets/icon.png",
        "rel": "icon"
      }
    }
  })
]

This will generate a dist/index.html with your webpack bundled output and the following:

<!DOCTYPE html>
<html>
 <head>
   <meta charset="UTF-8">
   <title>Webpack App</title>
   <link href="bootstrap-3.3.7/css/bootstrap.min.css" rel="stylesheet">
   <link href="bootstrap-3.3.7/css/bootstrap-theme.min.css" rel="stylesheet">
   <link href="bootstrap-3.3.7/css/bootstrap-theme.min.css" rel="stylesheet">
   <link href="/assets/icon.png" rel="icon">
 </head>
 <body>
   <script src="index_bundle.js"></script>
 </body>
</html>

Note that additionally, the contents of the following directories will be copied:

node_modules/bootstrap/dist/css -> dist/bootstrap-3.3.7/css node_modules/bootstrap/dist/fonts -> dist/bootstrap-3.3.7/fonts src/assets -> dist/assets