https://github.com/jgramoll/add-hashed-assets-to-html-plugin

Add a JavaScript or CSS asset with chunk hash into the HTML generated by html-webpack-plugin.
https://github.com/jgramoll/add-hashed-assets-to-html-plugin

fingerprinting html-webpack-plugin node webpack webpack-plugin webpack4

Last synced: 3 months ago
JSON representation

Add a JavaScript or CSS asset with chunk hash into the HTML generated by html-webpack-plugin.

• Host: GitHub
• URL: https://github.com/jgramoll/add-hashed-assets-to-html-plugin
• Owner: jgramoll
• License: mit
• Created: 2018-08-02T23:35:12.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2018-08-27T15:32:34.000Z (almost 8 years ago)
• Last Synced: 2025-03-30T03:42:28.957Z (over 1 year ago)
• Topics: fingerprinting, html-webpack-plugin, node, webpack, webpack-plugin, webpack4
• Language: JavaScript
• Size: 61.5 KB
• Stars: 1
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# add-hashed-assets-to-html-plugin

[![Build Status](https://travis-ci.org/jgramoll/add-hashed-assets-to-html-plugin.svg?branch=master)](https://travis-ci.org/jgramoll/add-hashed-assets-to-html-plugin)

[![Codacy Badge](https://api.codacy.com/project/badge/Grade/a8177620695f401b93c393e42158e9c2)](https://www.codacy.com/project/jgramoll/add-hashed-assets-to-html-plugin/dashboard?utm_source=github.com&utm_medium=referral&utm_content=jgramoll/add-hashed-assets-to-html-plugin&utm_campaign=Badge_Grade_Dashboard)

[![Coverage Status](https://coveralls.io/repos/github/jgramoll/add-hashed-assets-to-html-plugin/badge.svg?branch=master)](https://coveralls.io/github/jgramoll/add-hashed-assets-to-html-plugin?branch=master)

[![Known Vulnerabilities](https://snyk.io/test/github/jgramoll/add-hashed-assets-to-html-plugin/badge.svg?targetFile=package.json)](https://snyk.io/test/github/jgramoll/add-hashed-assets-to-html-plugin?targetFile=package.json)

## About

Add a JavaScript or CSS asset with chunk hash into the HTML generated by html-webpack-plugin. 

## Usage

In your webpack.config add AddHashedAssetsToHtmlPlugin with

the list of assets you want to add to your index.html

```js

plugins: [

  new CopyWebpackPlugin([

    {

      from: path.join(root, 'src/dependencies.css'),

      to:   path.join(root, 'dist/dependencies.[hash].css'),

    },

    {

      from: path.join(root, 'src/dependencies.js'),

      to:   path.join(root, 'dist/dependencies.[hash].js'),

    },

  ]),

  new HtmlWebpackPlugin(),

  new AddHashedAssetsToHtmlPlugin({

    assets: [

      {

        from: path.join(root, 'src/dependencies.css'),

        to:   path.join(root, 'dependencies.[hash].css'),

      },

      {

        from: path.join(root, 'src/dependencies.js'),

        to:   path.join(root, 'dependencies.[hash].js'),

      }

    ]

  })

]

```

### Output

```html

  

    

    Webpack App

  

  

  

```