Laravel mix versioning doesn't remove old built files

Question

I am using Laravel 5.4 with mix to version my javascript and scss files. The problem is: it doesn't clean the previous built files and simply add a new one with a different file name i.e. app.9d3e179e85922aad6ccf.js

In a new project I started, I do not have this issue. Mix correctly replaces the old file with the latest built version.

Is there somewhere where I can make the change?

Needle

Answer 1

This is an issue with the laravel-mix library which can't be addressed here. There are many open issues on GitHub referring to the same problem. You can check the most recent one for some workarounds till the official library gets a permanent fix.

https://github.com/JeffreyWay/laravel-mix/issues/814

Possible solutions in case the link doesn't work in the future.

There are few possible solution for now.

1. Let files go in default directories.

   js mix.js('./resources/assets/js/app.js', 'public/js/app.js')

2. Tell npm to delete your bundle folder before building new

3. Use the clean-webpack-plugin package https://github.com/johnagan/clean-webpack-plugin

Halvorsen

Answer 2

It looks like now the old files are overwritten, anyway I'm still experiencing an issue with the mix-manifest.json file not deleting files that are removed, so in case someone else encounters a similar problem, here is how I solved it.

Through the webpackConfig method I'm using the splitChunksPlugin from webpack, which reduces duplication between chunks by creating additional chunks when there is enough code in common between modules.

This means that in some cases the total number of dynamically added chunks is different between the dev and the prod environment, because in development files are larger, so it's easier to share more code between the files.

So the fact that the mix-manifest file is not updating when the build removes files is causing some issues (especially when working with other people) and I'd like to share how I solved the issue.

1. Laravel-Mix-Clean

In order to avoid having more files than needed, I'm deleting all the files at each build. I had to change the folder structure and pass the correct path to the method, but this didn't cause many issues.

npm install laravel-mix-clean --save-dev

and in the mix file

require('laravel-mix-clean');
// [...]
.clean({
  cleanOnceBeforeBuildPatterns: ['./js/*'],
});

2. Removing the manifest

Having the files in sync was not enough, so I had to remove the manifest file at each new build. In my set-up I have three concurrent builds (each with its own webpack.mix file), so I don't know which one will finish first.

The solution was to install the del-cli package (which is used internally by the clean-webpack-plugin, which in turn is used by laravel-mix-clean) and to delete the manifest file before each build.

npm install del-cli --save-dev

package.json

"scripts": {
  "clear-manifest": "del-cli public/mix-manifest.json",
  // [...]
  "development": "npm run clear-manifest && concurrently \"npm run css-dev\" \"npm run js-dev\" \"npm run js-dev-modern\"",
}

I hope this helps other people with similar issues.

Wame