Question

22

Webpack processAssets hook and asset source

rated 0 times [ 28] [ 6] / answers: 1 / hits: 5503 / 3 Years ago, sat, january 2, 2021, 12:00:00

I'm in the middle of upgrading my personal plugins to Webpack5, and while things are going smooth; I've been trying to wrap my head around how to properly change the source of a asset mid build.

I'm aware of Webpack5's changes to asset hooks, and needing to be in the processAssets hook / appropriate stage to do changes.

compilation.hooks.processAssets.tap(

  {

    name: 'BobRoss',

    stage: compilation.PROCESS_ASSETS_STAGE_ADDITIONAL,

    additionalAssets: true          

  },

  (assets) => {

    // ... logic here ...

  }

);

What I don't understand however is the actual asset's source prop, function or cached string?

For instance, to alter the source of a un-minified JS asset, I only find success with:

assets[i] = {

  source: () => 'the change';

};

However if that asset is minified, I only find success with:

assets[i]._chachedSource = 'the change';

which is kind of weird, but I guess we can work with that..

But then in walks HTML assets, which regardless of being minified or not, only works if I:

assets[i]._value = 'the change';

So, I'm increasingly feeling like I'm missing some obvious API method used to change an asset's source consistently and I'm adding points of failure not solutions. Can anyone point me in the right direction or give me an idea of better approach?

Thank you!

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

mustafaericho

Add To Favorites

Follow

Total Points: 322

Total Questions: 103

Total Answers: 110

Location: Montenegro

Member since Thu, Jun 16, 2022

2 Years ago

mustafaericho questions

1 npm i Error: `gyp` failed with exit code: 1

Mon, May 31, 21, 00:00, 3 Years ago

1 Node js, process.env not reading enviroment variables

Sun, May 23, 21, 00:00, 3 Years ago

1 Webpack erroring on mini-css-extract-plugin loader

Sat, Feb 13, 21, 00:00, 3 Years ago

1 what is the default AES config in crypto-js?

Thu, Nov 12, 20, 00:00, 4 Years ago

1 discord.js userID avatarURL in embed

Tue, Apr 14, 20, 00:00, 4 Years ago

View All

answered 3 Years ago mustafaericho · Accepted Answer

As suspected, I was indeed missing compilation.getAsset(), compilation.updateAsset() methods and webpack's { sources } class API here to make my life easier.

First, you need to bring in the { sources } class from webpack, which will aid us in crafting raw source changes to an asset (regardless of its optimization or asset type):

const { sources } = require('webpack');

Then, when looping over assets (provided from processAsset's callback), we can use the compilation object's compilation.getAsset() and compilation.updateAsset() methods to use a standardized approach in getting, updating and saving asset source code:

compilation.hooks.processAssets.tap(

  {

    name: 'BobRoss',

    stage: compilation.PROCESS_ASSETS_STAGE_ADDITIONAL,

    additionalAssets: true          

  },

  (assets) => {

    for (let i in assets) {

      const asset = compilation.getAsset(i);  // <- standardized version of asset object

      const contents = asset.source.source(); // <- standardized way of getting asset source



      // standardized way of updating asset source

      compilation.updateAsset(                

        i,

        new sources.RawSource(contents + 'new stuff')

      );                                     

    }

  }

);

Hope this helps others!