After countless improvements and bug fixes, the Mix API is now locked and we’re ready for a 1.0 release.
- Bumped Mix to webpack 3, and enabled Scope Hoisting.
- Much of Mix’s internal structure has been simplified and refactored to a plugin-based system.
- All non-webpack tasks are now triggered sequentially once webpack finishes its core compile. This means that Mix now supports step-by-step post-build steps. “Copy this here, and then combine those files there, and then minify that concatenated file.”
// Compile my JS and apply versioning. // Then copy the output file to a new directory. // Then combine these files. mix.js('resources/assets/js/app.js', 'public/js') .copy('public/js/app.js', 'public/somewhere') .combine([ 'public/js/vendor/jquery.js', 'public/somewhere/app.js' ], 'public/all.js') .version();
- The terminal compile output will now better reflect all files that are being processed.
- File versioning has been simplified. When using
mix.version(), no longer will we version the file name, itself. Instead, we’ll generate an md5 of the file’s contents, and apply it as a query string to the generated
mix-manifest.jsonfile. If using a service like Cloudflare, please ensure that you’ve enabled querystring-based cache-busting.
- You may also version any isolated files that aren’t part of your main Mix build.
// Version the compiled JS and Sass, but also file.js. mix.js('resources/assets/js/app.js', 'public/js') .sass('resources/assets/sass/app.scss', 'public/css') .version(['public/some/file.js']);
Because we’re bumping to an official 1.0 release, now is a good time to make a few tiny breaking changes. Don’t worry, you can patch these up in seconds.
- Mix now constructs its webpack configuration file behind the scenes. As such, you shouldn’t maintain your own
webpack.config.jsfile in your project root. Instead, use
mix.webpackConfig()for any custom overrides.
- To check for a production environment, instead of
cross-envhas been removed as a dependency of Mix. It doesn’t make sense for us to maintain it. Frameworks like Laravel will already pull in
cross-env, but for your personal projects, either open your
package.jsonfile and remove the
cross-envpath from all of your npm scripts, or do
npm install cross-env.
- Much of Mix’s internal structure has changed. If you were referencing any underlying Mix files or objects, beyond the main public API, please take note. It’s possible that you were referencing a Mix configuration item or option. Instead, you may now reference the global
Configobject within your
webpack.mix.jsfile, like so:
Config.sourcemaps; // false Config.hmr; // false Config.notifications; // true
mix.minify()no longer overwrites the current file. Instead, it creates a
*.min.jsfile alongside the original.
- If you create a .babelrc file in your project root, it’ll now be intelligently merged with Mix’s own Babel config file, rather than overwriting it completely. This was the source of many issues in the past.
- When using
mix.copy(), we now determine the output structure properly. If the first argument to
mix.copy()is a folder, then we’ll copy its structure recursively to your destination. If you instead pass an array or regular expression as the first argument, all matched files will be dumped in the top level of your output path.
- Many of Mix’s internal dependencies are now installed on demand. This way, if you don’t plan on using Less or Browsersync, you don’t have to worry about those being pulled in.