The power of webpack, distilled for the rest of us.
MIT License
Bot releases are visible (Hide)
Published by JeffreyWay over 7 years ago
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']
}
}
});
Published by JeffreyWay over 7 years ago
.vue
files.Published by JeffreyWay over 7 years ago
Published by JeffreyWay over 7 years ago
mix.ts()
error.Published by JeffreyWay over 7 years ago
After countless improvements and bug fixes, the Mix API is now locked and we're ready for a 1.0 release.
// 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();
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.// 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.
webpack.config.js
file in your project root. Instead, use mix.webpackConfig()
for any custom overrides.mix.config.inProduction
, do mix.inProduction()
.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
.Config
object within your webpack.mix.js
file, like so:Config.sourcemaps; // false
Config.hmr; // false
Config.notifications; // true
mix.minify()
no longer overwrites the current file. Instead, it creates a *.min.js
file alongside the original.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.Published by laracasts over 7 years ago
Published by JeffreyWay over 7 years ago
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.Published by JeffreyWay over 7 years ago
cleanCSS
options.npm run hot
.mix.standaloneSass()
multiple times.Published by JeffreyWay over 7 years ago
mix.copy()
logic entirely to be more consistent. 329ed0ccffb51d52111ec11359f2617c528c60c0mix.sass()
calls #674--https
flag, and adjust the URL as needed. c74d71d1832946dbb5386dcf266378d9ab97e299mix.standaloneSass()
now runs in a shell. fc5d2f026cc474f1ea3490d10be52954710e6897mix.standaloneSass()
now respects the global notifications property. 952912ffb7a8bfd1f9e71e79dcb003501f534f3bPublished by JeffreyWay over 7 years ago
mix.standaloneSass()
for a significantly faster build process. 2e1f51bf71433b3cdcb69395cd6d708246d68a3amix.options({ uglify: false });
0db436e645653dee42a3a24a1a28cbc268b257a9Published by JeffreyWay over 7 years ago
mix.options({ purifyCss: true });
mix.copyDirectory()
method. This will copy a full directory to a new location. a7699b55b7df2a18e3ef31c48a31c4d9c65569e6mix.copyDirectory('node_modules/some/place', 'public/copy/to/here');
babel-preset-es2015
over to babel-preset-env
. 126bad0d9b11973bc349f6c761e9192dbf72f266mix.options({ clearConsole: false });
mix.autoload({
jquery: ['$', 'window.jQuery', 'jQuery']
});
Learn more about autoloading here.
webpack-md5-hash
plugin in favor of webpack-chunk-hash
. 52807f856b0876f426156d385bd09b5f956aa747mix.webpackConfig()
. d9fa390b0e428f4aff376dca2427aef5fbd433ccmix.minify()
now honors any custom Uglify user options. 761f9adeb61dcf156390866d254133263b0b81f9Published by JeffreyWay over 7 years ago
mix.scripts()
and mix.styles()
, which are aliases for mix.combine()
. 80f9b0557c5a3427d3da2a9eca537846f6adef21friendly-errors-webpack-plugin
. c76020445ccb5cd2ceab31926b1b875cf5171f7b-p
flag. 970ae63d4172f394274759fec6dcb26ad10f49dalang="stylus"
support for .vue component files. 7f5b72554dd6c02c9a0f0590018137907dcb9d13webpack.config.js
image loader regex now checks for jpg
and jpeg
s. 32050bd854847a841b1475cf65e666641b4c5256mix.combine()
. This way, you can instead provide a string that includes a regular expression. 96fc2091477a99cc19e714715f99c3d4aa468ff7mix.options()
. fecd1c9bd555a2829c3819981cefadb8d4d6c323Published by JeffreyWay over 7 years ago
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
mix.options({ processCssUrls: false });
...to your webpack.mix.js
file. https://github.com/JeffreyWay/laravel-mix/commit/58d6b5d5a262359d6829fc95eb983cfba0600577
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
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
clean-css
dependency. https://github.com/JeffreyWay/laravel-mix/commit/39923ee456e109ee11973436ed410a68387506a2
mix.setResourceRoot()
method. https://github.com/JeffreyWay/laravel-mix/commit/d779fa4d0847d9bb5c40f3589e2e4015d157957d
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
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
Published by JeffreyWay over 7 years ago
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
});
.vue
files. e38f1f1939cd74594dd472789c92aae264703573mix.options({ extractVueStyles: true });
mix.combine()
does not exist (yet). 036b76d1052e0059e0172e8420ed3126e9b1bd1cPublished by JeffreyWay over 7 years ago
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.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');
mix.version()
is applied, the output paths for mix.combine()
will now automatically be versioned. 7c7aec629ef7dff357c005c86e3c072c325dca15 and 4c065f252d426c544056d14beff33479f15efbfemix.version()
. This way, you can version files that aren't part of your core Webpack build. cb819a0161df0d43ff18b1e3669d6a44990128c9mix.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
extract-text-webpack-plugin
version. 4aac7a63cd7dc5d55c6010905f6f2d614a256724sass-loader
always has sourcemaps enabled. This is a requirement for extracting CSS. c87a56726b348f32e6c436fbd4c8c03c21e99cf4Published by JeffreyWay over 7 years ago
mix.combine()
will now watch all provided source files for changes, and then automatically re-concatenate them quickly.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. 9098035b10dad3baf6a2eba270f23fee142a6e43mix.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. 8870ff16710c085e6fa3b1f98d1fba435efe0258friendly-errors-webpack-plugin
plugin specifically wants a quiet: true
option for devServer
58c35dcb5b4d1a3cb84aaf1a1e32c58ae233c00dmix.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
.Published by JeffreyWay over 7 years ago
webpack.config.js
now detects regular CSS files. 9fbf0906525771bba0eb6d0fbde47caf49e7ca17mix.sass()
and mix.less()
, as the third argument. c4553a94665259e49cab32279f82503d14c023fbconsole.log
s eaab1fe1f87c9bba407ff461a679e172eedc5dbePublished by JeffreyWay over 7 years ago
mix.sass()
or mix.less()
. You had to choose. Now you can use both, if your app requires it. b2808caf0f4c308b1f6f0a0a27ad5685432ae978mix.extract()
multiple times. Should you want to take advantage of HTTP2, this could be useful to split your vendor chunk into multiple, smaller files. bd4ddb2a94028fb7fcfc4067f0b54051a63a1890mix.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');
/images
, rather than your base public path. Any references to the file path will of course be updated automatically. e011d386ea944b66f04ed18e5acc416ad2150208mix.extract()
before mix.js()
no longer triggers an error. (But for readability, I'd still recommend calling it after.) 89af7a6b5d91923b64e8a63708d5fb11263c8702mix.combine()
, we now verify that every source file provided does, in fact, exist. bd1d69c1d8de7c96a5fca275dc5549b5837105camix.sass()
calls with the same base directory and file name to generate only one file, rather than two. 9d9c52fba7641ab8f7230aded9706e0cafeb03aaPublished by JeffreyWay over 7 years ago
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. cbe95bf1eadfb7cf4d240e5995ccc7d49242cadbmix.then())
. 96c0ff36d7feee3a64c65ec406884c21a5574a2amix.setCachePath()
method from API. d3843ad8f785999fe2bdb8a3a982832b10b6a353Published by JeffreyWay over 7 years ago
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);
52a0ffa3133a10fc76a617fb33ac51b1fd7ee525mix.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.autoload()
can now be called before mix.js()
without breaking. f00a04fa7503ffe775e483ad4eaa77ce7d6b9d4fmix.autoload()
now allows the library value to be a string or an array. 6de265dafddc7b6def25e907607d5af47c37431d