Loading vue skeleton assets that have been processed by webpack. - mediamonks/task-loader GitHub Wiki

In some cases you might want to load assets that have been processed by webpack. For example when you set images as a background in css but you still want to load them before your site is actually displayed.

Step 1:

Add a webpack asset manifest plugin to your project, for this example we'll be using the following: webpack-assets-manifest.

yarn add webpack-assets-manifest --dev

Step 2:

Add the loader to the webpack.base.conf.js file of the project. This will output a manifest file in the static folder of your project. This manifest file can be used to reference files to the files that webpack created.

...
const WebpackAssetsManifest = require('webpack-assets-manifest');
...

...
plugins: [
  new WebpackAssetsManifest({
    output: path.join(projectRoot, '/static/manifest.json'),
    writeToDisk: true,
  }),
],
... 

Step 3

Disable the CopyWebPackPlugin for the static folder in the webpack.dev.conf.js

Step 4

Load the manifest file in your application, this allows us to map the local file names to the webpack file names.

...
const manifestTask = new LoadJsonTask({
  assets: `${this.$versionRoot}manifest.json`,
  onAssetLoaded: ({ asset }) => {},
});

manifestTask.load().then(() => {
  manifestTask.dispose();
});
...

Step 5

Run your assets through the manifest file to get the webpack file name and load them in a load task.

...
const images = ['image/foo.jpg', 'image/bar.jpg'];
const manifestTask = new LoadJsonTask({
  assets: `${this.$versionRoot}manifest.json`,
  onAssetLoaded: ({ asset }) => {
    const loadImageTask = new LoadImageTask({
      assets: images.map(image => asset[image]),
    });

    loadImageTask.load().then(() => {
      loadImageTask.dispose();
    });
  },
});

manifestTask.load().then(() => {
  manifestTask.dispose();
});
...