laravel-mix

This release brings Laravel Mix current with webpack 5. It additionally includes a variety of bug fixes and enhancements.

• Changelog
• Upgrade Guide

Add webpack 5 support.

• Add support for sass-loader 8

• Fixes file path and compile issues on Windows.

To Upgrade...

npm remove laravel-mix
npm install [email protected]

After upgrading, if you encounter any vue-template-compiler issues, this is related to the fact that your installed version numbers of vue and vue-template-compiler must be identical. Update one or both to fix this issue.

New

• Faster compiles
• Faster npm installs.
• Upgraded to webpack 4
• Upgraded to vue-loader 15
• Upgraded to Babel 7
• Automatic vendor extraction. If you call mix.extract() with zero arguments, all vendor dependencies (any package from node_modules/ that you pull in) will automatically be extracted. Nifty!
• CSS minification (via cssnano) options may be provided 887808f8aea03b5dabc9e7350b66ee01a52e1610
• PostCSS plugins may be passed to mix.sass/less/stylus() on a per-call basis. This means you may provide unique PostCSS plugins for each mix.sass() call, if desired. 88690a2f770c071dc8160127c42a4f44decf2b56
• Switched JS optimizing/minification from Uglify to Terser. 5fb180e6e430e99b740a4bce330669cdd8fda29c
• Switched from node-sass to Dart Sass. While this comes with a small increased compile-time cost, the benefit is faster and more reliable npm installs. 320cecbdb77e222e32903219905d0d8f3754c5ff
• Improved Babel config merging strategy. You may now override or tweak any default Babel plugins and presets provided through Mix by creating a .babelrc file in your project root. 83f5052eb32c498a90edace47402d66eaf80f4b7

Bugfixes

• All npm audit alerts have been fixed, thanks to the upgrade to webpack 4.

Notes

• If your project heavily uses JavaScript dynamic imports, you may need to hold off until the release of webpack 5 early next year. There are known compile issues related to this that we cannot fix until then. Once webpack 5 is out, Mix will be updated shortly after. If you're unfamiliar with dynamic imports, then this very likely won't affect your project.
• Sass support is now an on-demand dependency. In prior versions of Mix, the node-sass and sass-loader dependencies were included out of the box, regardless of whether your project required Sass compilation or not. To help improve install times, these two dependencies will now be installed on-demand if, and only if, your project specifies Sass compilation with mix.sass(). The first time you run npm run dev, the dependencies will be installed and saved to your dev-dependencies list. 5b7a438bcf53bc87ccc08da09b1e816a6088dec8

Breaking

Importing ES Modules

Important: As part of the vue-loader 15 updates, if your code uses the CommonJS syntax for importing EcmaScript modules, you'll need to append .default, like so:

Before

Vue.component('example-component', require('./components/ExampleComponent.vue'));

After

// Option 1: Add .default

Vue.component('example-component', require('./components/ExampleComponent.vue').default);

// Option 2 (Recommended): Switch to EcmaScript imports.

import ExampleComponent from './components/ExampleComponent.vue';

Vue.component('example-component', ExampleComponent);

Babel 7 Updates

Important: Now that Mix has been updated to support Babel 7, you may need to address a few Babel-specific breaking changes. If your project pulls in extra Babel plugins that Mix does not provide out of the box, you'll need to update your local dependencies.

1. The naming convention for official Babel plugins has changed. They are now scoped under the @babel namespace. As such, in your package.json file, change all occurrences of "babel-plugin-[name]": "6.x" to "@babel/plugin-[name]": "7.x"
2. If you've created a .babelrc file in your project, update all plugin name references. For example, update "plugins": ["babel-plugin-transform-object-rest-spread"] to "plugins": ["@babel/plugin-proposal-object-rest-spread"]

Node Sass to Dart Sass

As part of our switch from node-sass to dart-sass, though support is largely identical, you may notice changes or warnings upon compilation. You may either address these one-by-one, or you can manually switch back to node-sass, like so:

npm install node-sass

mix.sass('resources/sass/app.sass', 'public/css', {
    implementation: require('node-sass')
});

fastSass() and standaloneSass() Removed

mix.fastSass() and mix.standaloneSass() (aliases) have been removed entirely. In an effort to improve performance for those who only need to compile CSS, this command provided Sass compilation that was separate from the core webpack build. However, it seems to be more confusing than helpful to newcomers. Migrate by switching from mix.fastSass() to mix.sass(). 3e478043f7d6cfc73442b2971727d8595b6a559f

Before

mix.fastSass('resources/sass/app.scss', 'public/css');

After

mix.sass('resources/sass/app.scss', 'public/css');

Deprecated .mix Property Removed

The deprecated mix property has now been removed. If you have require('laravel-mix').mix in your webpack.mix.js file, change it to require('laravel-mix'). 7dc010451870c0b23d8e22fe5d0fa67714d7df5f

Before

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

After

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

Switching From Uglify to Terser

Due to the mandatory switch from Uglify to Terser, if your project was overriding our default config with Config.uglify = {}, you'll need to switch to Config.terser = {}. The options API is largely the same.

Before

// webpack.mix.js

mix.options({
    uglify: {
        uglifyOptions: {
            warnings: true
        }
    }
});

After

mix.options({
    terser: {
        terserOptions: {
            warnings: true
        }
    }
});

Vue Component Sass Preprocessing

If your project does not include a mix.sass() call (which automatically downloads all necessary dependencies), but does specify lang="sass" in your Vue components, you may need to install either node-sass or sass. Because Mix doesn't know which preprocessors you specify in your Vue components, you'll need to manually pull them in. Fix it with npm install node-sass sass-loader or npm install sass sass-loader. Please note that the same is true for Less and Stylus.

npm install laravel-mix@beta

New

Babel 7 support! As this new version of Babel includes major breaking changes, Mix, too, needs to bump from v2 to v3. We've taken care of most the changes, however, if your project pulls in extra Babel plugins that Mix does not provide out of the box, you'll need to update locally as well.

1. The naming convention for official Babel plugins has changed. They are now scoped under the @babel namespace. As such, in your package.json file, change all occurrences of "babel-plugin-[name]": "6.x" to "@babel/plugin-[name]": "7.x"
2. If you've created a .babelrc file in your project, update all plugin name references. For example, update "plugins": ["babel-plugin-transform-object-rest-spread"] to "plugins": ["@babel/plugin-proposal-object-rest-spread"]

Fixes

• Updated the rootPath to the working directory of the node process. #1719
• Fixed issues with minified css and purify. #1634

Onward

Next up, we'll be upgrading the Mix codebase to webpack 4. Stay tuned.

New

• Component Rewrite - Much of Mix's webpack integration has been refactored toward a component-based setup.
• User Extensions - As part of the component rewrite, Mix now exposes an API (mix.extend()) to extend its functionality to plugin authors. (Think: npm install laravel-mix-my-extension)
• CoffeeScript support has returned. Use mix.coffee() to install the necessary dependencies and compile your .coffee files.

Fixes

• #1467 Fix "extractVueStyles not using specified file"

(Potentially) Breaking

• #1367 Distinguish better between font and image SVGs. (Depending upon your project structure, this may change the output path for certain SVG files. Please review #1367 for the related discussion.)

New

• 2fc80f877441c71ccade44c87669725567cf8ec7 Add mix.babelConfig() to main API. (Now you don't have to create a .babelrc file to add a single plugin or two.)
• #1406 Allow multiple mix.webpackConfig() calls.
• #1342 Sort manifest key-value pairs by key.
• #1246 Add support for HMR on different hosts and ports.
• a7ce542f9cbbf37014283d06dc06658f8cf84b92 Make .env MIX_ config available to webpack.mix.js.
• bd3dc42715890eb2c9468d8928b0f8fc89ac61ad Allow custom autoprefixer config, or disable it entirely.
• c679e0b3412ab6859486f61b5ca3c42579c26e46 Add glob support for mix.js(). (mix.js('src/*.js', 'dist').
• #1425 Add automated CI testing for pull requests.

Updates

• 8e8aeff20407dc12630a4b835f408d855994cc2a Allow for custom vue-loader configuration.
• #1354 Update webpack's devtool option to a full source-map.
• #1374 Add dependency verification when using globalVueStyles option.

Fixes

• #1420 Find temporary script by name.

New

• #1277 Added support for ES7 async/await

Fixes

• #1343 Fix the default path public directory calculation on Windows
• a9d26462f752b7c0db65dfdd485d061d47094aa0 Remove the drop_console config option.

New

• #1301 Updated uglify-js to version 1.0. This release finally adds ES6 support.
• #1294 Added Preact support, via mix.preact().
• #1163 Added support for Vue global styles that can be available to all components.
• 68bc8592e254dfd81549f2c496ce445d0c4d582d mix.webpackConfig() now can accept a callback function.
• #1243 The underlying sourcemap style is now configurable.
• #1300 CSS autoprefixing may now be toggled.

Fixes

• #1264 Fixed vue-template-compiler incompatibility.
• #1237 extractVueStyles accepts a string path.

New

• 6b5ae97543f9ca22d6937b15e818491d42de789d The transform-object-rest-spread Babel plugin is now enabled by default.
• #1211 Vue's esModule option is now configurable.
• #1154 file-loader output directories are now configurable.
• #1097 Add Browsersync support for the dd() function.

Fixes

• #1189 When applying postcss plugins, autoprefixer will now always occur last in the sequence.

Updates

• bd77f7c2589478e91ed505e29431d32b60fbb1e4 Bump vue-loader dependency to 13.0.5.
• 6909f2a737df7e677761a9ee7b42da8f859d04c6 Yarn auto-installing saves to dev-dependencies now.

New

• b7846ca914252707a7ab49fc2b71c1533fb6792e Bump webpack to 3.5.
• #1088 Bump vue-template-compiler version.

Fixes

• #1077 Dispatch an event when the webpack configuration is finished being constructed by Mix.
• #1180 Load alternative Vue dist file for TypeScript.
• 9766a2ad2eba4cc6058ceaf8250ce9836db1b44c Fix node-sass path for standalone Sass compilation.

New

• #1012 Added support for postcss exclusive compilation (no Sass or Less required): mix.postCss().
• f7c7ff915db7fbc9bf3e8038423914f98857b0da Pin webpack 3.4 dependency.

Fixes

• #879 Local sourcemap support now defaults to the webpack "inline-source-map" type.
• b78d5bff070e335a4a9c1dbd53f3d11410137901 Hot reloading now properly writes its temporary file to the proper publicPath.
• #1043 Adjusted the BuildCallbackPlugin to fire after all custom tasks have completed.
• #1048 Properly save auto-installed dependencies when using Yarn.

New

• #1008 You can now pass a directory path to mix.version() to version all nested files.

mix.version('path/to/folder');

• #1030 mix.combine(), mix.scripts(), and mix.styles() may now also accept a folder path.

mix.scripts('public/js/vendor', 'public/combined.js'); // combine all files in this dir
mix.scripts('public/assets/*.js', 'public/combined.js') // combine all JS files in this dir

• #1003 Custom file watching now respects the --watch-poll command line option.
• #1028 Support importing .vue files using TypeScript.
• 25ed65bd236a1a643bbd2fcc4548f03a02c91097 Returned webpack 3 scope hoisting optimizations.

Fixes

• #996 Serve static files from webpackDevServer.
• #1025 Disabling success notifications is now respected by mix.fastSass().

New

• #963 - You may now import Sass and Less files directly into your JavaScript, if needed.
• 650c604cee212b02c7f45e20cf55835e232fa959 Bumped various dependencies.

Fixes

• 99d2f3ffc66021300cbee92c80527af535065815 Mix.combine() now provides better feedback if the output path is omitted.
  = 7e61f561cdd94343d7a648d0c330fa7e221a81a2 Mix.babel() no longer hardcodes the Babel config. It instead reads from Mix's config (or yours, if you provide one).

New

• #885 Added support for variable expansion within .env files.

Fixes

• #962 Fixed a bad path calculation when watchingmix.copy() assets for changes.
• #957 A custom public directory that doesn't exist will no longer cause Mix to error out.
• #964 Fixed an issue with calculating relative paths outside of the project root.
• 88c126e9cdf2fb2205079555c926ba8326e09a24 We now use the ES-module build of Vue, rather than the CommonJS version.

• 643f9b90059e8543750c3ee0703c3d2921e5f719 Fixes a glitch related to importing files with a .css extension in your Sass files.