html-webpack-deploy-assets-plugin

v1.0.4

Published

3 years ago

Add the ability to deploy assets from node_modules packages

Downloads

0High
0Medium
0Low

jharris4

webpack html deploy assets packages

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

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

Deploy Assets extension for the HTML Webpack Plugin

Installation

Options

Example