Need to run version() twice for images to be versioned after copied

• Laravel Mix Version: #.#.# (1.4.2)
• Node Version (v6.11.3):
• NPM Version (3.10.10):
• OS: Docker image based on php:7.1-fpm

Description:

Using the following webpack.mix.js:

mix.webpackConfig({
    plugins: [
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery'
        })
    ]
})
    .setPublicPath('public')
    .sass('resources/assets/sass/app.scss', 'public/css')
    .js('resources/assets/js/app.js', 'public/js')
    .extract(['jquery'])
    .copy('resources/assets/images', 'public/images', false)
    .copy('resources/assets/favicons/*', 'public')
    .version('public/images');

The files copied into public/images are not being versioned.

During the first run of yarn run prod --non-interactive, the js, css, images referenced in css and the favicon are versioned. The images are not versioned.

yarn run v1.0.2
$ npm run production "--non-interactive"

> @ production /var/www
> cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js

 95% emitting DONE  Compiled successfully in 6186ms1:54:22 PM

                                                                         Asset       Size  Chunks             Chunk Names
        fonts/proximanova-regular-webfont.eot?469031e15d59bb85a6fc19097d6984ce    21.2 kB          [emitted]
        ....
        ....
        ....
                                                                    /js/app.js  396 bytes       0  [emitted]  /js/app
                                                                 /js/vendor.js      87 kB       1  [emitted]  /js/vendor
                                                               /js/manifest.js    1.38 kB       2  [emitted]  /js/manifest
                                                                  /css/app.css    19.1 kB       0  [emitted]  /js/app
                                                                  /favicon.png    1.66 kB          [emitted]

On the 2nd run, the images are now versioned.

yarn run v1.0.2
$ npm run production "--non-interactive"

> @ production /var/www
> cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js

 95% emitting DONE  Compiled successfully in 5841ms1:54:31 PM

                                                                         Asset       Size  Chunks             Chunk Names
        fonts/proximanova-boldit-webfont.woff?df6755c672085f7e58fce60b2d4ff3b3      27 kB          [emitted]
        ...
        ...
        ...
                                                                    /js/app.js  396 bytes       0  [emitted]  /js/app
                                                                 /js/vendor.js      87 kB       1  [emitted]  /js/vendor
                                                               /js/manifest.js    1.38 kB       2  [emitted]  /js/manifest
                                                                  /css/app.css    19.1 kB       0  [emitted]  /js/app
                                                                  /favicon.png    1.66 kB          [emitted]
                                                   /images/social-facebook.svg  802 bytes          [emitted]
                                                   ...
                                                   ...
                                                   ...
                                                      /images/social-gplus.svg  914 bytes          [emitted]
                                                    /images/social-twitter.svg    1.17 kB          [emitted]
                                                       /images/usb-ed-logo.png    22.8 kB          [emitted]

[patrickcarlohickman]

I believe the problem is only when versioning a directory. When versioning a directory, the glob() to get the files to version is run at the time the .version() method is called, not at the time the version task is actually run.

To work around this, we add in a new method at the top of our webpack.mix.js file:

let mix = require('laravel-mix');

mix.copyOutsideMixWorkflow = function (from, to) {
    new File(from).copyTo(new File(to).path());

    return this;
}.bind(mix);

Then, when copying directories, we use this new function instead of the .copy() function. For example:

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    .copyOutsideMixWorkflow('resources/images', 'public/images')
    .copy('resources/favicons/favicon.ico', 'public/favicon.ico')
    .version([
        "public/images",
        "public/favicon.ico"
    ]);

Now, the .copyOutsideMixWorkflow() call will copy the files from ‘resources/images’ to ‘public/images’ immediately, so when the .version() method is called, those files will exist for the glob() call to pickup.

This works for us, but we don’t have a fancy setup. I don’t know what potential complications this has, but it works if you’re just using npm run dev and npm run prod.

[matthewgoslett]

My personal work-around here is to keep my images in public/images/ in repo. I .gitignore all other build files in public/ except for images.