npmpackage.info

Gathering detailed insights and metrics for contenthash-replace-webpack-plugin

contenthash-replace-webpack-plugin

Webpack plugin for transforming bundle references in your html files with cache friendly filenames using content hashes.

0.0.6

JavaScript

8.70 kB

Installations

npm install contenthash-replace-webpack-plugin

Developer Guide

BETA

Typescript

No

Module System

CommonJS

Node Version

16.17.1

NPM Version

8.15.0 Pull Requests

Open

0

Total

2

Closed

0

Merged

2

Issues

Open

0

Total

0

Closed

0

Releases

Unable to fetch releases

Languages

JavaScript

JavaScript (100%)

Developer

joeyeng

Download Statistics

Total Downloads

Last Day

Last Week

Last Month

Last Year

GitHub Statistics

2 Stars

19 Commits

1 Forks

1 Watchers

1 Branches

2 Contributors

Updated on Oct 28, 2022

Maintainers

View All 2 Contributors

Package Meta Information

Latest Version

0.0.6

Package Id

contenthash-replace-webpack-plugin@0.0.6

Unpacked Size

8.70 kB

Size

3.22 kB

File Count

NPM Version

8.15.0

Node Version

16.17.1

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

NaN

Compared to previous day

Last Week

NaN

Compared to previous week

Last Month

NaN

Compared to previous month

Last Year

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

fs loader-utils path

Dev Dependencies

mocha webpack

Content Hash 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 (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

1$ npm install contenthash-replace-webpack-plugin --save-dev

Example

Webpack.config.js

1const path = require('path');
2const ContentHashReplacePlugin = require('contenthash-replace-webpack-plugin');
3const ExtractTextPlugin = require('extract-text-webpack-plugin');
4
5module.exports = {
6  entry: {
7    app: ['./src/app.js']
8  },
9  output: {
10    path: path.join(__dirname, 'dist/static'),
11    filename: '[name].js',
12    publicPath: '/static/',
13  },
14  module: {
15    rules: [
16      {
17        test: /\.css$/,
18        use: ExtractTextPlugin.extract({
19          fallback: 'style-loader',
20          use: 'css-loader'
21        })
22      }
23    ]
24  },
25  plugins: [
26    new ContentHashReplacePlugin({
27      src: 'index.html',
28      dest: 'dist/index.html',
29      files: ['./css/app.css']
30      format: '[name].[contenthash].[ext]'
31    }),
32    new ExtractTextPlugin('[name].[contenthash].css')
33  ]
34};

HTML

1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <link href="/static/app.css" rel="stylesheet">
5</head>
6<body>
7  <script src="/static/app.js"></script>
8</body>
9</html>

app.js

1require('./app.css');
2console.log('hello world!');

Output

1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <link href="/static/app.a92b36339e7f9340ca152593ca9c81ba.css" rel="stylesheet">
5</head>
6<body>
7  <script src="/static/app.js"></script>
8</body>
9</html>

No vulnerabilities found.

No security vulnerabilities found.

Other packages similar to contenthash-replace-webpack-plugin

Other packages similar to contenthash-replace-webpack-plugin

contenthash-replace-webpack-plugin

Installations

Developer Guide

No

CommonJS

16.17.1

8.15.0

Pull Requests

0

2

0

2

Issues

0

0

0

Releases

Unable to fetch releases

Languages

Developer

Download Statistics

GitHub Statistics

Maintainers

Package Meta Information

Total Downloads

NaN

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Dev Dependencies

Content Hash Replace Webpack Plugin

Installation

Example

Webpack.config.js

HTML

app.js

Output