Replace-hash-webpack-plugin NPM

Replace Hash Webpack plugin

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>

webpack plugin hash replace html

packing-glob lodash.endswith mkdirp object-assign

@infinitebrahmanuniverse/nolb-repl @everything-registry/sub-chunk-2651

7 years ago

7 years ago

8 years ago

8 years ago