Skip to content

Instantly share code, notes, and snippets.

@thinhbuzz
Created June 15, 2020 17:53
Show Gist options
  • Save thinhbuzz/4ab63526defdfcaec3d1d46930e10020 to your computer and use it in GitHub Desktop.
Save thinhbuzz/4ab63526defdfcaec3d1d46930e10020 to your computer and use it in GitHub Desktop.
Completely customize angular build files hashing.
module.exports = function (config) {
const buzz = `${Date.now()}.buzz`; //change the value to what do you want
if (config.output.filename) {
const splicedOut = config.output.filename.split('.');
config.output.filename = `${splicedOut.slice(0, -1).join('.')}.${buzz}.${splicedOut.slice(-1).join('.')}`;
}
if (config.output.chunkFilename) {
const splicedOut = config.output.chunkFilename.split('.');
config.output.chunkFilename = `${splicedOut.slice(0, -1).join('.')}.${buzz}.${splicedOut.slice(-1).join('.')}`;
}
if (Array.isArray(config.module.rules)) {
config.module.rules.forEach(rule => {
if (rule.options && rule.options.name) {
const splicedOut = rule.options.name.split('.');
rule.options.name = `${splicedOut.slice(0, -1).join('.')}.${buzz}.${splicedOut.slice(-1).join('.')}`;
}
});
}
if (Array.isArray(config.plugins)) {
config.plugins.forEach(plugin => {
if (plugin.options && plugin.options.filename) {
const splicedOut = plugin.options.filename.split('.');
plugin.options.filename = `${splicedOut.slice(0, -1).join('.')}.${buzz}.${splicedOut.slice(-1).join('.')}`;
}
if (plugin.options && plugin.options.chunkFilename) {
const splicedOut = plugin.options.chunkFilename.split('.');
plugin.options.chunkFilename = `${splicedOut.slice(0, -1).join('.')}.${buzz}.${splicedOut.slice(-1).join('.')}`;
}
});
config.plugins.push({
apply(compiler) {
compiler.hooks.compilation.tap('build-angular', compilation => {
compilation.mainTemplate.hooks.assetPath.tap('build-angular', (filename, data) => {
const assetName = typeof filename === 'function' ? filename(data) : filename;
if (!data.chunk || data.chunk.name !== 'polyfills-es5') {
return assetName;
}
const splicedOut = assetName.split('.');
const isMap = assetName && assetName.endsWith('.map');
if (isMap) {
return `${splicedOut.slice(0, -2).join('.')}.${buzz}.${splicedOut.slice(-2).join('.')}`;
}
return `${splicedOut.slice(0, -1).join('.')}.${buzz}.${splicedOut.slice(-1).join('.')}`;
});
});
}
});
}
return config;
};
@thinhbuzz
Copy link
Author

thinhbuzz commented Jun 15, 2020

This solution required package @angular-builders/custom-webpack and you must be modified the file angular.json to look like this.

{
  ...
  "architect": {
    ...
    "build": {
      ...
      "builder": "@angular-builders/custom-webpack:browser",
      "options": {
        ...
        "customWebpackConfig": {
          "path": "./extra-webpack.config.js"
        }
      }
    }
  }
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment