Copy 3rd party dist assets

sage
1

Using the jQuery Vegas plugin (link), how do you get image assets copied from the dist/overlays directory to the dist/vendor directory when building? We see that the images referenced in the css are copied over to the dist/vendor folder.

Referencing them directly from node_modules isn’t going to work as the build process we use never deploys node_modules to production.

2

I had the same issue with legacy js files. What I did is creating a folder called js. Then in webpack.config.js I added the following entry under the CopyGlobsPlugin for image:

new CopyGlobsPlugin({
  pattern: config.copyJs,
  output: `[path]${assetsFilenames}.[ext]`,
  manifest: config.manifest,
}),

Make sure you add a field in config.js for

copy: 'images/**/*', //add it just like this for copyJs
copyJs: 'js/**/*',

Then in your template files you can do:

@asset('js/oldjQueryplugins.js');
2 Likes
3

I know this is an old topic, but in case anyone will google it as I did, I found a solution that doesn’t require any webpack build files edit.

In my case, it was really necessary to have fonts copied to dist folder.

According to CopyGlobsWebpackPlugin you can use two folders as a pattern.

Sage is merging user config from resources/assets/config.json with webpack config, so all we need to do is to add updated “copy” option to config.json.

Default is:

So add to resporces/assets/config.json (or config-local.json, but I doubt you need this as an env specific option)

{
    ...
    "copy": "+(images|fonts)/**/*",
    ...
}

Done.

2 Likes
4

Just an update.
As I have been implementing your solution, I was getting this error on yarn build :

TypeError: compilation.fileDependencies.includes is not a function
at /Users/Santos/GoogleDrive/Sites/roots/web/app/themes/restaurant/node_modules/copy-globs-webpack-plugin/index.js:129:82

Which I fixed by upgrading copy-globs-webpack-plugin to 0.3.0. In case it happens to someone else just update this module using:

yarn add copy-globs-webpack-plugin@^0.3.0