laravel-mix

• #919 - All purifyCss options will now be properly passed to the purifycss-webpack plugin.

 mix.sass('resources/assets/sass/app.scss', 'css')
    .options({
        purifyCss: {
            purifyOptions: {
                whitelist: ['someCssClass']
            }
        }
    });

• We no longer exclude the node_modules directory, when scanning for .vue files.

• e4f952cde5e1f881fc25399f279560f4587b6763 Drop all comments when minifying in production mode.
• ea20b1404fb04ac3feef518626bccff1c05cae72 Limit file minification to only assets triggered outside of the core webpack compile.

• 1da78b6ea0c1b256c582f5dbdea9b14802699e50 Removes unused variable that caused a mix.ts() error.

After countless improvements and bug fixes, the Mix API is now locked and we're ready for a 1.0 release.

Additions

1. Bumped Mix to webpack 3, and enabled Scope Hoisting.
2. Much of Mix's internal structure has been simplified and refactored to a plugin-based system.
3. 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();

3. The terminal compile output will now better reflect all files that are being processed.
4. 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.json file. If using a service like Cloudflare, please ensure that you've enabled querystring-based cache-busting.
5. 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']);

Breaking

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.

1. Mix now constructs its webpack configuration file behind the scenes. As such, you shouldn't maintain your own webpack.config.js file in your project root. Instead, use mix.webpackConfig() for any custom overrides.
2. To check for a production environment, instead of mix.config.inProduction, do mix.inProduction().
3. cross-env has 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.json file and remove the cross-env path from all of your npm scripts, or do npm install cross-env.
4. 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 Config object within your webpack.mix.js file, like so:

Config.sourcemaps; // false
Config.hmr; // false
Config.notifications; // true

4. mix.minify() no longer overwrites the current file. Instead, it creates a *.min.js file alongside the original.

Fixes

1. 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.
2. 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.
3. 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.

• Fix #832 uglify-js bug.

Additions

• #812 - Added support for TypeScript.
• d4191cfcfb6831913965a64ae2a724f7091a9ac4 - Bumped Uglify to version 3.
• #788 - imgLoader options are now configurable.
• #609 - Added the ability to specify a custom webpack.mix.js file.

Fixes

• 71b50dcd9689f339a2ea241b3aa2ef684919ac92 - When using mix.copy() to copy an array of source files to a destination, we've fixed the output path to not include the full source path structure.
• 22c55c1ac40c7a1177ac4e7a7a2baa8e6f00f679 - Added the name modules plugin for hot reloading.
• 5783ed18d8c30a6918e7d24b90594975c1f7da49 - Source maps are now generated by default.
• #773 - Strip control codes from node-sass failure output, for better PHPStorm output rendering.

Fixes

• #745 - Added support for overriding the default cleanCSS options.
• #748 - Fixed access-control-allow-origin issue related to npm run hot.
• 532271ac1683fbf3cafc3e608b9e56ea0583e029 - Added support for calling mix.standaloneSass() multiple times.

New

• Rewrote mix.copy() logic entirely to be more consistent. 329ed0ccffb51d52111ec11359f2617c528c60c0
• Added support for Less-specific Vue styles extraction. 9e1deed3006d066dfc305ea228b27f835ce105bc
• Allow for importing Sass files directly into your JavaScript files. https://github.com/JeffreyWay/laravel-mix/commit/60f040bf1caf76d15cea4bd403e981c548ad5b8d
• Added Vue pre/postloaders overrides. e45503786c0fa50a13cc0755bcf9c18eff569e5d
• Bumped webpack-dev-server dependency. 16d8bd2ea3b5cbd939cbe6284ff01eefb32eb76e

Fixes

• Resolve issued related to the same hash being used for multiple mix.sass() calls #674
• When using hot reloading, we now listen for the --https flag, and adjust the URL as needed. c74d71d1832946dbb5386dcf266378d9ab97e299
• Fixed a CSS sourcemap issue. 8bc66c923b5956600a1402b6cd66dbd89f1f4289
• mix.standaloneSass() now runs in a shell. fc5d2f026cc474f1ea3490d10be52954710e6897
• mix.standaloneSass() now respects the global notifications property. 952912ffb7a8bfd1f9e71e79dcb003501f534f3b

New

• Standalone Sass! If you don't need your Sass to be processed and optimized by Webpack (url rewriting, purification, etc.), you may now use mix.standaloneSass() for a significantly faster build process. 2e1f51bf71433b3cdcb69395cd6d708246d68a3a
• Uglification can now be disabled entirely with mix.options({ uglify: false }); 0db436e645653dee42a3a24a1a28cbc268b257a9

Fixes

• Concat tasks should use the "env" Babel preset, not "es2015" 86db4bff74f9541d9dfe2b21c02aaa86e974dfce
• When using hot reloading, we now apply a closing forward slash to the URL. 00e11ed8f20a136730a9d83a73df081ba20d0a73

Additions

• Added support for automatic image file size optimization. 115e8f15790aea1029288e1d56956cc2d48ac79b
• Added support for automatic CSS purification (removal of unused CSS). 41642eb56790029450c89187cd1f5799cfb57050

mix.options({ purifyCss: true });

• Added mix.copyDirectory() method. This will copy a full directory to a new location. a7699b55b7df2a18e3ef31c48a31c4d9c65569e6

mix.copyDirectory('node_modules/some/place', 'public/copy/to/here');

• Per Babel's recommendation, we've switched the default Babel preset from babel-preset-es2015 over to babel-preset-env. 126bad0d9b11973bc349f6c761e9192dbf72f266
• You can now disable the default clearing of of the console, each time Webpack compiles. 6400bb0369d9c353e45232bae89449eebe39d58a

mix.options({ clearConsole: false });

• Bumped Webpack dependency to ~2.3.0. cc79fe90d39859cfadc4705ea1b62ad69f201f0f
• Bumped sass-loader and resolve-url-loader dependencies. 1828c8bda4ae18a9e2ae8df456818e99b19f5ca1
• Bumped vue-loader and vue-template-compiler dependencies. 105533b301d57abaf5aca4aba4544d7eaee5519a
• Bumped friendly-errors-webpack-plugin. 05c5674304c13a9f3fde5438f2fb3836f0cf6786

Potentially Breaking

• We no longer add jQuery as a default for webpack's ProvidePlugin. 82004419296f0359bd6ca2fb49f64c8135db3268 If your app requires this, you can manually add it back in, like so:

mix.autoload({
    jquery: ['$', 'window.jQuery', 'jQuery']
});

Learn more about autoloading here.

Fixes

• For file versioning, we swapped the webpack-md5-hash plugin in favor of webpack-chunk-hash. 52807f856b0876f426156d385bd09b5f956aa747
• Chunked files will now be placed in your main JS output folder. 735521ff34b7338579abafb1042acf6e3c8b2987
• We now use smarter merging for mix.webpackConfig(). d9fa390b0e428f4aff376dca2427aef5fbd433cc
• To prevent file name collisions, vendor assets will now be moved to a dedicated vendor folder. 6f3b052b40339a0e61acd5010f7e9bf0a6391a1b
• mix.minify() now honors any custom Uglify user options. 761f9adeb61dcf156390866d254133263b0b81f9

Additions

• Added mix.scripts() and mix.styles(), which are aliases for mix.combine(). 80f9b0557c5a3427d3da2a9eca537846f6adef21
• Bumped friendly-errors-webpack-plugin. c76020445ccb5cd2ceab31926b1b875cf5171f7b
• Added a rule for cursor files. 5dc00a2f5736942299b4c224a6797e6f8287027b
• When determining a production environment, we now also check for webpack-cli's -p flag. 970ae63d4172f394274759fec6dcb26ad10f49da
• Added lang="stylus" support for .vue component files. 7f5b72554dd6c02c9a0f0590018137907dcb9d13

Fixes

• Our webpack.config.js image loader regex now checks for jpg and jpegs. 32050bd854847a841b1475cf65e666641b4c5256
• We no longer force an array as the first argument to mix.combine(). This way, you can instead provide a string that includes a regular expression. 96fc2091477a99cc19e714715f99c3d4aa468ff7
• Fixed/Improved deep merging of options, when calling mix.options(). fecd1c9bd555a2829c3819981cefadb8d4d6c323
• Fixed/Improved Vue CSS extraction support. a9702bed8d6e65679fe2634ea4b8aac835d52a80

Additions

• Added Stylus support, via mix.stylus(src, output). The first time you run this method, it will install the necessary dependencies. https://github.com/JeffreyWay/laravel-mix/commit/a0f9cddb9587e96e4133fd97359b29ab2401a79d
• Added the ability to disable CSS url() rewriting. This is a feature of Webpack's, not a bug. That said, if you don't want Webpack to touch your CSS url()'s, you can add...

mix.options({ processCssUrls: false });

...to your webpack.mix.js file. https://github.com/JeffreyWay/laravel-mix/commit/58d6b5d5a262359d6829fc95eb983cfba0600577

• Added a mix.babel() method. This works identically to mix.combine(), except for the fact that it applies Babel compilation, once the files have been concatenated. This is useful for simple projects, where you only need to combine a few scripts...but still would like to use ES2015. https://github.com/JeffreyWay/laravel-mix/commit/047ab9cb844a233598e8fcd19b68522a310e1b61
• Added a mix.react() method. Its signature is identical to mix.js(), and enables the necessary Babel plugins to compile everything down properly. The first time you run this method, it will install the necessary dependencies. https://github.com/JeffreyWay/laravel-mix/commit/a79f64b6371c9d23807a57f482cabe054a6d6d44
• Bumped clean-css dependency. https://github.com/JeffreyWay/laravel-mix/commit/39923ee456e109ee11973436ed410a68387506a2
• Added mix.setResourceRoot() method. https://github.com/JeffreyWay/laravel-mix/commit/d779fa4d0847d9bb5c40f3589e2e4015d157957d

Fixes

• Downgraded Webpack's css-loader dependency to a release before a particular performance bug was introduced. This should improve compile times significantly. https://github.com/JeffreyWay/laravel-mix/commit/433bbabe71764b2ebaccf646ad83f99bc1ddbbd9
• Removed window.jQuery from Webpack's ProvidePlugin default. This seemed to cause issues with some plugins that check if window.jQuery is defined. https://github.com/JeffreyWay/laravel-mix/commit/f83b54fca8976a770f51edd2e995048f17337418
• Fixed an issue that caused certain old versioned files to not be deleted properly. 3c8bb726ee7ed8f10ef1cee135a7d4d4c51ecfa6

Additions

• Added native BrowserSync support.

mix.browserSync('my-site.dev');

// or

mix.browserSync({
    proxy: 'my-site.dev',
    files: ['path/to/files/to/watch/**/*.js'] // defaults to Laravel-specific watchers
    port: 3000
});

• Added Webpack support for recognizing HTML files c2403e7d214d0bf11a5cd016a0f96287c97973f3
• Added an opt-in option to extract styling declared in your .vue files. e38f1f1939cd74594dd472789c92aae264703573

mix.options({ extractVueStyles: true });

Fixes

• Mix will no longer fail if the source file you pass to mix.combine() does not exist (yet). 036b76d1052e0059e0172e8420ed3126e9b1bd1c

Potentially Breaking

• If mix.version() is applied, the output path for mix.combine(src, output) will now automatically be versioned. If your webpack.mix.js file includes both mix.combine() and mix.version(), ensure that, in your HTML, you're referencing the proper output path for your mix.combine() call.

Additions

• When calling mix.copy(), you may now also pass an array of file paths as the first argument.

mix.copy([
   'path/to/one.txt',
   'path/to/two.txt'
], 'public/output');

• If mix.version() is applied, the output paths for mix.combine() will now automatically be versioned. 7c7aec629ef7dff357c005c86e3c072c325dca15 and 4c065f252d426c544056d14beff33479f15efbfe
• You may now optionally pass an array to mix.version(). This way, you can version files that aren't part of your core Webpack build. cb819a0161df0d43ff18b1e3669d6a44990128c9

mix.version(['public/js/some-file.js']);

This call will create a versioned file within the same directory. some-file.b2362b9e77323a1293c84124b5d6a5de.js. As with other versioned files, you may reference the mix-manifest.json file to fetch the exact hashed path.

https://www.dropbox.com/s/ssnc2zbuli4jzlp/Screenshot%202017-02-07%2013.09.17.png?dl=0

• Bumped extract-text-webpack-plugin version. 4aac7a63cd7dc5d55c6010905f6f2d614a256724

Fixes

• Ensure that sass-loader always has sourcemaps enabled. This is a requirement for extracting CSS. c87a56726b348f32e6c436fbd4c8c03c21e99cf4

Additions

• mix.combine() will now watch all provided source files for changes, and then automatically re-concatenate them quickly.
• When running mix.combine(), we now append the output path to your mix-manifest.json file. This normally wouldn't happen, because concatenation isn't part of your normal Webpack bundle. But we're manually appending it to the file for convenience. 9098035b10dad3baf6a2eba270f23fee142a6e43

Fixes

• Fixed an issue with mix.combine() that caused output paths that included nested directories that don't exist to fail. We now recursively create the directory structure if it doesn't exist yet. 8870ff16710c085e6fa3b1f98d1fba435efe0258
• Node 6 or higher is required d2806677fe7d88511edae0b058e2c9225437276e
• The friendly-errors-webpack-plugin plugin specifically wants a quiet: true option for devServer 58c35dcb5b4d1a3cb84aaf1a1e32c58ae233c00d
• When running mix.minify(), we no longer operate directly on the provided file. That made no sense. Instead, we output a new file to the same directory, and suffix .min.. So app.js would minify to app.min.js.

Additions

• Our webpack.config.js now detects regular CSS files. 9fbf0906525771bba0eb6d0fbde47caf49e7ca17
• Added JSX support to the .js test regex. c2fb9a9b1607c54eaa0e820fda51b0ab6a0c92e8
• You may now pass node-sass and Less-specififc plugin options to both mix.sass() and mix.less(), as the third argument. c4553a94665259e49cab32279f82503d14c023fb
• During production builds, we now automatically drop any lingering console.logs eaab1fe1f87c9bba407ff461a679e172eedc5dbe

Additions

• You may now compile Sass and Less at the same time. Before, you could only do mix.sass() or mix.less(). You had to choose. Now you can use both, if your app requires it. b2808caf0f4c308b1f6f0a0a27ad5685432ae978
• You may now call mix.extract() multiple times. Should you want to take advantage of HTTP2, this could be useful to split your vendor chunk into multiple, smaller files. bd4ddb2a94028fb7fcfc4067f0b54051a63a1890
• As part of the new mix.extract() enhancements, you can also specify a new second argument, which will determine the output path - similar to mix.js().

mix.js('src', 'dest')
   .extract(['vue', 'jquery'], 'public/js/vendor-libs.js')
   .extract(['other', 'libs', 'to', 'extract'], 'public/js/will-go-here.js');

Fixes

• When Webpack encounters an image, it'll now export it to /images, rather than your base public path. Any references to the file path will of course be updated automatically. e011d386ea944b66f04ed18e5acc416ad2150208
• We no longer generate source maps for production environments. They're unnecessary. 71f4c7ea5d9783c6bd8e7ec51b284ea4cb30cc45
• Calling mix.extract() before mix.js() no longer triggers an error. (But for readability, I'd still recommend calling it after.) 89af7a6b5d91923b64e8a63708d5fb11263c8702
• When calling mix.combine(), we now verify that every source file provided does, in fact, exist. bd1d69c1d8de7c96a5fca275dc5549b5837105ca
• Ensured that Less compilation does include source maps, where necessary. 0d70dc9abdf9dfb8749dc6847e0721fa372d8fd8
• Fixed a bug that caused multiple mix.sass() calls with the same base directory and file name to generate only one file, rather than two. 9d9c52fba7641ab8f7230aded9706e0cafeb03aa

Additions

• You are no longer required to call mix.js() at least once. If you don't, we'll setup a temporary entry-point for you (since Webpack requires it), and then delete it once Webpack finishes its build. cbe95bf1eadfb7cf4d240e5995ccc7d49242cadb
• You can now hook into each time Webpack completes its build process, by calling mix.then()). 96c0ff36d7feee3a64c65ec406884c21a5574a2a

Fixes

• Fixed a bug that caused source files in different directories, but with the same name, to not compile properly. be433ff97df7b9afac1ed243b72cb9e2acfd2029
• Removed unused mix.setCachePath() method from API. d3843ad8f785999fe2bdb8a3a982832b10b6a353

Additions

• mix.copy() now accepts a third argument, which can be used to disable flattening for your output files. If you need to maintain your directory structure, do mix.copy('from', 'to', false); 52a0ffa3133a10fc76a617fb33ac51b1fd7ee525
• When compiling Sass, we now default to a precision level of 8. 102b71aee41be171f6ea3699a551a2db248c68c3

Fixes

• When calling mix.js() multiple times, you may now specify unique output paths. Before, Mix would use the same JS base directory for all mix.js() output paths.
• Mix now installs the stable release of Webpack 2.2.0 40ef111fdfe9a7c9da869d20eea59998131a5be1
• Bumped the concatenate dependency. dc1867fd91942d104d51dafb965a47c053c4a5a3
• mix.autoload() can now be called before mix.js() without breaking. f00a04fa7503ffe775e483ad4eaa77ce7d6b9d4f
• mix.autoload() now allows the library value to be a string or an array. 6de265dafddc7b6def25e907607d5af47c37431d