replace-hash-webpack-plugin

2.4.2 • Public • Published

Replace Hash Webpack plugin

NPM

This is a webpack plugin that update script references in HTML files by webpack bundle's hash.

It uses the glob library to do files matching.

Installation

Install the plugin with npm:

$ npm install replace-hash-webpack-plugin --save-dev

Configuration

You can pass a hash of configuration options to ReplaceHashWebpackPlugin. Allowed values are as follows:

  • cwd: The current work directory.
  • src: The original pattern the minimatch object represents.
  • dest: Dest files save path.
  • pattern: {Array} (optional) Find and replace rules.
  • exts: {Array} (optional) Asset types to be replaced. Default: ['js', 'css']

Example

//webpack.config.js
var ReplaceHashWebpackPlugin = require('replace-hash-webpack-plugin');
var webpackConfig = {
  entry: 'main.js',
  output: {
    filename: '[name]-[hash:8].js',
    publicPath: 'http://www.cdn.com/js/',
  },
  plugins: [
    new ReplaceHashWebpackPlugin({
      cwd: 'static',
      src: '**/*.jade',
      dest: 'prd',
    }),
    // new ReplaceHashWebpackPlugin({
    //   cwd: process.cwd() + '/static',
    //   src: '**/*.html',
    //   dest: process.cwd() + '/prd',
    //   exts: ['png', 'jpg', 'jpeg'],
    //   pattern: [
    //     {
    //       find: '([\'"])([/]?%s)(["\'])',
    //       replace: '$1%s$3'
    //     }
    //   ]
    // }),
  ]
};
<!-- static/index.html -->
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>replace-hash-webpack-plugin</title>
</head>
<body>
  <script src="/js/main.js"></script> 
</body>
</html>

result:

<!-- prd/index.html -->
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>replace-hash-webpack-plugin</title>
</head>
<body>
  <script src="http://www.cdn.com/js/main-e8f4f5aa.js"></script> 
</body>
</html>

Package Sidebar

Install

npm i replace-hash-webpack-plugin

Weekly Downloads

45

Version

2.4.2

License

ISC

Last publish

Collaborators

  • zhongzhi