# contenthash-replace-webpack-plugin

> Webpack plugin for transforming bundle references in your html files with content hash formatted names.

Latest version **0.0.6** (published 2022-12-28) · ISC license · 0 weekly downloads

## Install

```sh
npm install contenthash-replace-webpack-plugin
pnpm add contenthash-replace-webpack-plugin
yarn add contenthash-replace-webpack-plugin
bun add contenthash-replace-webpack-plugin
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.6 |
| Published | 2022-12-28 |
| First published | 2017-05-31 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 8.7 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 2 |
| Author | Joey Eng |
| Maintainers | joeyeng |
| Keywords | contenthash, content hash, webpack contenthash, webpack content hash, webpack content hash replace, webpack replace content hash, webpack content hash css, webpack css |

## Links

- npm: https://www.npmjs.com/package/contenthash-replace-webpack-plugin
- Repository: https://github.com/joeyeng/contenthash-replace-webpack-plugin
- Issues: https://github.com/joeyeng/contenthash-replace-webpack-plugin/issues
- npm.io page: https://npm.io/package/contenthash-replace-webpack-plugin

## Dependencies (3)

- [fs](https://npm.io/package/fs.md) 0.0.2
- [path](https://npm.io/package/path.md) ^0.12.7
- [loader-utils](https://npm.io/package/loader-utils.md) ^2.0.0

## Alternatives

- [@gemini-wallet/core](https://npm.io/package/@gemini-wallet/core.md) — 515.6K weekly downloads
- [utility](https://npm.io/package/utility.md) — 416.6K weekly downloads
- [@primno/dpapi](https://npm.io/package/@primno/dpapi.md) — 7.2K weekly downloads
- [pi-readseek](https://npm.io/package/pi-readseek.md) — 3.7K weekly downloads
- [@emilia-protocol/verify](https://npm.io/package/@emilia-protocol/verify.md) — 1.1K weekly downloads

## Recent versions

- 0.0.6 (latest) — 2022-12-28
- 0.0.5 — 2017-06-01
- 0.0.4 — 2017-05-31
- 0.0.3 — 2017-05-31
- 0.0.2 — 2017-05-31
- 0.0.1 — 2017-05-31

## README

Content Hash Replace Webpack Plugin
================================
[![Build](https://travis-ci.org/joeyeng/contenthash-replace-webpack-plugin.svg?branch=master)](https://travis-ci.org/giemch/contenthash-replace-webpack-plugin)
[![Total Downloads](https://img.shields.io/npm/dt/contenthash-replace-webpack-plugin.svg)](https://npm-stat.com/charts.html?package=contenthash-replace-webpack-plugin)

This plugin is for transforming bundle references in your html files with cache friendly filenames using content hashes. It's meant to work side by side with [ExtractTextPlugin](https://www.npmjs.com/package/extract-text-webpack-plugin) (when using content hashes). Its main use is for processing css file references. Images should work too, but I haven't tested it. It was made generic enough to handle js bundle references as well, but as of this writing it appears using [contenthash] is not supported for naming js bundles.

**Tip**: Just use this plugin for your production/staging builds.

## Installation
```shell
$ npm install contenthash-replace-webpack-plugin --save-dev
```

## Example

### Webpack.config.js

```javascript
const path = require('path');
const ContentHashReplacePlugin = require('contenthash-replace-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  entry: {
    app: ['./src/app.js']
  },
  output: {
    path: path.join(__dirname, 'dist/static'),
    filename: '[name].js',
    publicPath: '/static/',
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: 'css-loader'
        })
      }
    ]
  },
  plugins: [
    new ContentHashReplacePlugin({
      src: 'index.html',
      dest: 'dist/index.html',
      files: ['./css/app.css']
      format: '[name].[contenthash].[ext]'
    }),
    new ExtractTextPlugin('[name].[contenthash].css')
  ]
};
```
### HTML

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <link href="/static/app.css" rel="stylesheet">
</head>
<body>
  <script src="/static/app.js"></script>
</body>
</html>
```

### app.js

```javascript
require('./app.css');
console.log('hello world!');
```

### Output

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <link href="/static/app.a92b36339e7f9340ca152593ca9c81ba.css" rel="stylesheet">
</head>
<body>
  <script src="/static/app.js"></script>
</body>
</html>
```

---
_Source: https://npm.io/package/contenthash-replace-webpack-plugin · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._