JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 248
  • Score
    100M100P100Q111892F
  • License ISC

Plugin for webpack replaces contenthash

Package Exports

  • replacer-contenthash-webpack-plugin
  • replacer-contenthash-webpack-plugin/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (replacer-contenthash-webpack-plugin) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Replacer Contenthash Webpack Plugin

This plugin is designed to add for your static files such as css, js, images, svg-sprite contenthash. Its main purpose is processing links to your file and generating contenthash.

Tip: For work you need to install the plugin "loader-utils".

Installation

$ npm install replacer-contenthash-webpack-plugin

Example

Webpack.config.js

const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const ReplacerContenthashWebpackPlugin = require('replacer-contenthash-webpack-plugin');

module.exports = {
  entry: {
    vendor: ['./src/vendor.js']
  },
  output: {
    path: path.join(__dirname, 'dist/build'),
    filename: '[name].js',
    publicPath: '/static/',
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          fallback: 'style-loader',
          use: 'css-loader'
        })
      }
    ]
  },
  plugins: [
    new ExtractTextPlugin('[name].css'),
    new ReplacerContenthashWebpackPlugin({
      // Path to the folder with the files that will be replaced
      filesDir : ["src"],                      
      // List of files to be replaced
      files : ["src/vendor.js, src/vendor.css", "src/vendor.rtl.css", "src/images.png", "src/svg-sprite.svg"],  
      // Path to a specific template
      templates : ["templates/index.html"],     
      // Folder in which will search for templates
      templatesFolder : ["templates"]                 
    }),
    
    // OR
    
    new ReplacerContenthashWebpackPlugin({
      files : ["src/vendor.js, src/vendor.css", "src/vendor.rtl.css", "src/images.png", "src/svg-sprite.svg"],  
      templates : ["templates/index.html"],
    }),
    
    // OR
    
    new ReplacerContenthashWebpackPlugin({
      filesDir : ["src"],
      templatesFolder : ["templates"]
    }),
     
     
  ]
};

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <link href="/build/vendor.css" rel="stylesheet">
  <link href="/build/vendor.rtl.css" rel="stylesheet">
</head>
<body>
  <img src="/src/images.png"/>
  
  <svg class="svg-icon svg-icon-visa">
      <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="build/svg-sprite.svg#visa"></use>
  </svg>
  
  <script src="/build/vendor.js"></script>
</body>
</html>

Output

<!DOCTYPE html>
<html lang="en">
<head>
  <link href="/build/vendor.df21fce15a0bf0d48b1c3c7a0be4d06c.css" rel="stylesheet">
  <link href="/build/vendor.rtl.df21fce15a0bf0d48b1c3c7a0be4d06c.css" rel="stylesheet">
</head>
<body>
  <img src="/src/images.9f6dd77d90580f8ab54b517852ff0b72.png"/>

  <svg class="svg-icon svg-icn-visa">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="build/svg-sprite.6fd910b6a5490645684a504075d829ce.svg#visa"></use>
  </svg>

  <script src="/build/vendor.9f6dd77d90580f8ab54b517852ff0b72.js"></script>
</body>
</html>