html-webpack-deploy-assets-plugin

1.0.4 • Public • Published

Deploy Assets extension for the HTML Webpack Plugin

Enhances html-webpack-plugin functionality by allowing you to specify js or css assets from node_modules to be copied and included.

Installation

You must be running webpack on node 0.12.x or higher

Install the plugin with npm:

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

Options

The available options are:

  • packagePath: string

    The path to installed packages, relative to the current directory. Default is node_modules.

  • append: boolean

    Specifies whether the assets will be appended (true) or prepended (false) to the list of assets in the html file. Default is false.

  • publicPath: boolean or string

    Specifying whether the assets should be prepended with webpack's public path or a custom publicPath (string).

    A value of false may be used to disable prefixing with webpack's publicPath, or a value like myPublicPath/ may be used to prefix all assets with the given string. Default is true.

  • outputPath: string

    A directory name that will be created for each of the deployed assets.

    Instances of [name] will be replaced with the package name. Instances of [version] will be replaced with the package version.

    Default is [name]-[version].

  • packages: object

    Specifies the definition of the assets from installed packages to be deployed. Defaults is {}.

    The keys/properties of the packages option must be the name of an installed package, and the definition must be an object with the following properties:

    • 'outputPath': string

    Allows the global outputPath to be overriden on a per-package basis. Default is the global value.

    • assets: object

    Specifies files or directories to be copied from the package's directory.

    The keys/properies are the asset to be copied, and the values are the target asset location within webpack's output directory.

    These are used as the from & to properties for the internal usage of the copy-webpack-plugin

    • entries: array

    Specifies files to be included in the html file.

    The file paths should be relative to webpack's output directory.

  • assets: object

    Specifies the definition of the local assets to be deployed. Defaults is {}.

    The keys/properies are the asset to be copied, and the values are the target asset location within webpack's output directory.

  • links: array

    Specifies the definition of the links to be deployed. Defaults is [].

    The objects in the links are of the shape:

    {
      href: "path/to/asset", // required - must be a string
      rel: "icon",           // required - must be a string
      sizes: '16x16',            // example of optional extra attribute
      anyOtherAttribute: 'value'
    }

    For which the following would be injected into the html header:

    <head>
      <link href="${webpack.publicPath}/path/to/asset" rel="icon" sizes="16x16" anyOtherAttribute="value"/>
    </head>

Example

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

plugins: [
  new HtmlWebpackPlugin(),
  new HtmlWebpackDeployAssetsPlugin({
    "packages": {
      "bootstrap": {
        "assets": {
          "dist/css": "css/",
          "dist/fonts": "fonts/"
        },
        "entries": [
          "css/bootstrap.min.css",
          "css/bootstrap-theme.min.css"
        ]
      }
    },
    "assets": {
      "src/assets": "assets/"
    }
    "link": [
      {
        "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

Dependencies (2)

Dev Dependencies (8)

Package Sidebar

Install

npm i html-webpack-deploy-assets-plugin

Weekly Downloads

2

Version

1.0.4

License

MIT

Unpacked Size

9.43 kB

Total Files

3

Last publish

Collaborators

  • jharris4