Loading vue skeleton assets that have been processed by webpack.

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();
});
...