Skip to content

cammytang/assets-content-hash-plugin

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

21 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

assets-content-hash-plugin

This Webpack plugin will

  1. generate contenthash for every file you pass by param 'file';
  2. rename filename to new one which include hash, format xxx.yyy.[hash].[js|css]
  3. replace file with new filename in index.html

TODO: Auto inject assets file to index.html with correct meta tag.

Why Is This Useful?

You may use some static files in index.html, which are assets under public path.

When these static files changed, user may can't get the updated ones because of browser cache. Containing content hash in filename can avoid the cache issue.

Example output:

The output is a file whose name contains its content hash:

my-app/build/config.510e9f86.js

sync filename in build/index.html

<script src='https://myapp.com/config.510e9f86.js'></script>

Install

npm install assets-content-hash-plugin

Configuration

In your webpack config include the plug-in. And add it to your config:

import AssetsContentHashPlugin from 'assets-content-hash-plugin';
// ...
module.exports =function (webpackEnv) {
	const isEnvProduction = webpackEnv === 'production';
    // ....
	plugins: [
		isEnvProduction && new AssetsContentHashPlugin({
			file: ['config.js', 'common.css']
		})
	]
}

Options

You can pass the following options:

file

Required. string or string array. Asset file path.

html

Optional. index.html by default.

Dependency

loader-utils 

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published