Skip to content

Latest commit

 

History

History
88 lines (76 loc) · 2.36 KB

README.md

File metadata and controls

88 lines (76 loc) · 2.36 KB

Content Hash Replace Webpack Plugin

Build Total Downloads

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

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

Example

Webpack.config.js

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

<!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

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

Output

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