Awesome

Deployment extension for the HTML Webpack Plugin

Enhances html-webpack-plugin allowing you to copy assets or node_modules package assets into your webpack build and inject them as tags into your html.

Built on top of the html-webpack-tags and copy-webpack plugins.

Installation

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

• You must be running Node 10.0 along with Webpack 5.0 or higher for version 3.x of this 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)

Integration

The chunksSortMode option of html-webpack-plugin 3.x has a default value of auto.

This option is known to cause issues with code splitting or lazy loaded bundles (#981).

When using this plugin with version 3.x you should set this chunksSortMode to 'none', like this:

new HtmlWebpackPlugin({ chunksSortMode: 'none' })

Configuration

The plugin configuration is specified by an options object passed to its constructor.

This object has an assets option for copying & injecting local files, and a packages option for copying & injecting packages from your local node_modules directory.

new HtmlWebpackDeployPlugin({
  assets: {
    copy: [{ from: 'a', to: 'b' }],
    links: [
      'b/my.css',
      {
        hash: false,
        publicPath: false,
        path: 'b/my.png',
        attributes: {
          rel: 'icon'
        }
      }
    ],
    scripts: 'b/my.js'
  },
  packages: {
    'bootstrap': {
      copy: [{ from: 'dist/bootstrap.min.css', to: 'bootstrap.min.css'}],
      links: {
        useCdn: true,
        path: 'bootstrap.min.css',
        cdnPath: 'dist/bootstrap.min.css'
      },
    },
    'react': {
      copy: [{ from: 'umd', to: '' }],
      scripts: {
        variableName: 'React',
        path: 'react.production.min.js',
        cdnPath: 'umd/react.production.min.js',
      }
    },
    'react-dom': {
      copy: [{ from: 'umd', to: '' }],
      scripts: {
        variableName: 'ReactDOM',
        path: 'react-dom.production.min.js',
        cdnPath: 'umd/react-dom.production.min.js',
      },
      useCdn: false
    }
  },
  useCdn: true,
  getCdnPath: (packageName, packageVersion, packagePath) => `https://unpkg.com/${packageName}@${packageVersion}/${packagePath}`
});

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

Options are inherited by inner levels of the config and will be overridden if specified in a level.

The available options are described below, grouped by at what <i>level</i> in the plugin config they may be used.

Root Options

These options are only available at the root level of the plugin config.

All Level Options

Several options from the html-webpack-tags-plugin are available at all levels.

Options are passed down the levels, and overriden if specified at a lower level.

Assets and Packages Options

Packages Options

Root and Packages and Tag-inside-Packages Options

Tag Options

The available tag options for links or scripts are defined by the html-webpack-tags-plugin.

Additional tag options are defined by this plugin:

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 findUp = require('find-up');
const slash = require('slash'); // fixes slashes in file paths for windows

const DEFAULT_OPTIONS = {
  assets: {},
  packages: {},
  useAssetsPath: true,
  addAssetsPath: assetPath => path.join('assets', assetPath),
  usePackagesPath: true,
  addPackagesPath: packagePath => path.join('packages', packagePath),
  getPackagePath: (packageName, packageVersion, packagePath) => path.join(packageName + '-' + packageVersion, packagePath),
  findNodeModulesPath: (cwd, packageName) => findUp.sync(slash(path.join('node_modules', packageName)), { cwd }),
  useCdn: false,
  getCdnPath: (packageName, packageVersion, packagePath) => `https://unpkg.com/${packageName}@${packageVersion}/${packagePath}`
};

Option Details

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: {
        path: '/assets/icon.png',
        attributes: {
          rel:'icon'
        }
      }
    }
  })
]

This will generate a index.html something like:

<!DOCTYPE html>
<html>
 <head>
   <meta charset="UTF-8">
   <title>Webpack App</title>
   <link href="any-webpack-generated-styles.css" rel="stylesheet">
   <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="/assets/icon.png" rel="icon">
 </head>
 <body>
  <script src="any-webpack-generated-bundles.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

Deploying React from a CDN:

plugins: [
  new HtmlWebpackPlugin(),
  new HtmlWebpackDeployAssetsPlugin({
    packages: {
      'react': {
        copy: [{ from: 'umd', to: '' }],
        scripts: {
          variableName: 'React',
          path: 'react.production.min.js',
          cdnPath: 'umd/react.production.min.js',
        }
      },
      'react-dom': {
        copy: [{ from: 'umd', to: '' }],
        scripts: {
          variableName: 'ReactDOM',
          path: 'react-dom.production.min.js',
          cdnPath: 'umd/react-dom.production.min.js',
        }
      }
    }
    useCdn: true,
    getCdnPath: (packageName, packageVersion, packagePath) => `https://unpkg.com/${packageName}@${packageVersion}/${packagePath}`
  })
]

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

<!DOCTYPE html>
<html>
 <head>
   <meta charset="UTF-8">
   <title>Webpack App</title>
   <link href="any-webpack-generated-styles.css" rel="stylesheet">
 </head>
 <body>
  <script src="https://unpkg.com/react@16.8.6/umd/react.production.js"></script>
  <script src="https://unpkg.com/react-dom@16.8.6/umd/react-dom.production.js"></script>
  <script src="any-webpack-generated-bundles.js"></script>
  <!-- react & react-dom were removed from webpack bundles automatically -->
 </body>
</html>

Deploying React from Local UMD Bundles:

plugins: [
  new HtmlWebpackPlugin(),
  new HtmlWebpackDeployAssetsPlugin({
    packages: {
      'react': {
        copy: [{ from: 'umd', to: '' }],
        scripts: {
          variableName: 'React',
          path: 'react.production.min.js',
          devPath: 'react.development.js'
        }
      },
      'react-dom': {
        copy: [{ from: 'umd', to: '' }],
        scripts: {
          variableName: 'ReactDOM',
          path: 'react-dom.production.min.js',
          devPath: 'react-dom.development.js'
        }
      }
    }
  })
]

This copies react and react-dom into webpack's output directory, versioning the directory automatically based on their installed version. They can now be referenced from the tag paths in the html.

Webpack is instructed that react and react-dom are external so they are no longer bundled by webpack.

The generated index.html looks like:

<!DOCTYPE html>
<html>
 <head>
   <meta charset="UTF-8">
   <title>Webpack App</title>
   <link href="any-webpack-generated-styles.css" rel="stylesheet">
 </head>
 <body>
  <script src="my-public-path/packages/react-16.8.6/react.production.min.js"></script>
  <script src="my-public-path/packages/react-dom-16.8.6/react-dom.production.min.js"></script>
  <script src="any-webpack-generated-bundles.js"></script>
  <!-- react & react-dom were removed from webpack bundles automatically -->
 </body>
</html>

Or in development mode because the devPath option was specified, the generated index.html looks like:

<!DOCTYPE html>
<html>
 <head>
   <meta charset="UTF-8">
   <title>Webpack App</title>
   <link href="any-webpack-generated-styles.css" rel="stylesheet">
 </head>
 <body>
  <script src="my-public-path/packages/react-16.8.6/react.development.js"></script>
  <script src="my-public-path/packages/react-dom-16.8.6/react-dom.development.js"></script>
  <script src="any-webpack-generated-bundles.js"></script>
  <!-- react & react-dom were removed from webpack bundles automatically -->
 </body>
</html>

Non CDN Options

When doing custom deployment without a CDN it can be useful to configure the directories that all assets and packages are copied to and served from.

The following examples show some useful settings for such situations.

Disabling the grouping of assets into the assets directory:

new HtmlWebpackDeployAssetsPlugin({ useAssetsPath: false });

<link href="my-public-path/assets/file.css">
<script src="my-public-path/assets/file.js"></script>

becomes:

<link href="my-public-path/file.css">
<script src="my-public-path/file.js"></script>

Custom grouping of assets into a configurable directory:

new HtmlWebpackDeployAssetsPlugin({ assetsPath: 'my-assets-path' });

<link href="my-public-path/assets/file.css">
<script src="my-public-path/assets/file.js"></script>

becomes:

<link href="my-public-path/my-assets-path/file.css">
<script src="my-public-path/my-assets-path/file.js"></script>

Disabling the grouping of packages into the packages directory:

new HtmlWebpackDeployAssetsPlugin({ usePackagesPath: false });

<link href="my-public-path/packages/bootstrap-4.3.1/bootstrap.min.css">
<script src="my-public-path/packages/react-16.8.6/react.production.min.js"></script>

becomes:

<link href="my-public-path/bootstrap-4.3.1/bootstrap.min.css">
<script src="my-public-path/react-16.8.6/react.production.min.js"></script>

Custom grouping of packages into a configurable directory:

new HtmlWebpackDeployAssetsPlugin({ packagesPath: 'my-packages-path' });

<link href="my-public-path/packages/bootstrap-4.3.1/bootstrap.min.css">
<script src="my-public-path/packages/react-16.8.6/react.production.min.js"></script>

becomes:

<link href="my-public-path/my-packages-path/bootstrap-4.3.1/bootstrap.min.css">
<script src="my-public-path/my-packages-path/react-16.8.6/react.production.min.js"></script>