Chunkhash-replace-dm-webpack-plugin NPM

Chunkhash Replace Webpack Plugin

This plugin is for transforming bundle references in your html files with cache friendly filenames using chunkhashes. Its main use is for processing js file references. CSS files will work too, but chunkhashes are associated with js bundles, so changes to your css will not generate a new chunkhash. For handling CSS bundles I recommend the Content Hash Replace Plugin.

Tip: Just use this plugin for your production/staging builds.

Installation

$ npm install chunkhash-replace-dm-webpack-plugin --save-dev

Example

Webpack.config.js

const path = require('path');
const ChunkHashReplacePlugin = require('chunkhash-replace-dm-webpack-plugin');

module.exports = env => {
  entry: {
    app: ['./src/app.js'],
    vendor: ['jquery', 'lodash', 'react', 'react-dom']
  },
  output: {
    path: path.join(__dirname, 'dist/static'),
    filename: `scripts/[name]${env.prod?'.[chunkhash]':''}.bundle.js`,
    publicPath: '/static/'
  },
  plugins: [
    new ChunkHashReplacePlugin({
      src: 'index.html',
      dest: 'dist/index.html',
    })
  ]
};

Run script

To run on production mode set extra param --env.prod Environment Variables | webpack

webpack --config webpack.config.js --env.prod

For dev mode you don't need to do chunkhash is faster

webpack --config webpack.config.js

Support

filename:

name.chunkhash.js
scripts/name.chunkhash.js
scripts/name.chunkhash.bundle.js
scripts/name${env.prod?'.chunkhash':''}.bundle.js

HTML

<!DOCTYPE html>
<html lang="en">
<body>
  <script src="/static/vendor.js"></script>
  <script src="/static/app.js"></script>
</body>
</html>

Output

<!DOCTYPE html>
<html lang="en">
<body>
  <script src="/static/vendor.8c670c84b126bbde6319.js"></script>
  <script src="/static/app.bc9412b20a3d196ac0eb.js"></script>
</body>
</html>

chunkhash webpack chunkhash webpack chunkhash replace webpack replace script reference

@everything-registry/sub-chunk-1325 @zalastax/nolb-chu

0.1.2

8 years ago

0.1.1

8 years ago

0.1.0

8 years ago