Merge pull request #6 from iulyanp/upgrade-laravel-mix

Upgrade to latest laravel mix version

README.md

@@ -4,6 +4,9 @@
 ElixirMixBundle
 ===================
 
+> Note! Starting with Symfony 4 you can use the official webpack wrapper from Symfony: [Encore](https://symfony.com/doc/current/frontend/encore/installation.html).
+I also wrote a short blog post about how you can [Compile your assets with Symfony Encore](https://iulyanp.github.io/symfony/2017/06/18/symfony-encore/).
+
 ElixirMixBundle is a Symfony bundle that integrates [Laravel Mix](https://github.com/JeffreyWay/laravel-mix). 
 The purpose of the bundle is to offer the `mix()` twig function. This is exactly the same `mix()` function from Laravel 
 blade template system.

package.json

@@ -7,12 +7,16 @@
     "production": "cross-env NODE_ENV=production webpack --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
   },
   "devDependencies": {
-    "axios": "^0.16.1",
-    "bootstrap-sass": "^3.3.7",
-    "jquery": "^3.2.1",
-    "laravel-mix": "^0.11.4",
-    "lodash": "^4.16.2",
-    "purifycss-webpack": "^0.7.0",
-    "vue": "^2.3.3"
+    "axios": "^0.19",
+    "bootstrap": "^4.1.0",
+    "cross-env": "^5.1",
+    "jquery": "^3.2",
+    "laravel-mix": "^4.0.14",
+    "lodash": "^4.17.5",
+    "popper.js": "^1.12",
+    "resolve-url-loader": "^2.3.1",
+    "sass": "^1.15.2",
+    "sass-loader": "^7.1.0",
+    "vue": "^2.5.17"
   }
 }

webpack.mix.js.dist

@@ -1,4 +1,4 @@
-let mix = require('laravel-mix').mix;
+let mix = require('laravel-mix');
 
 /*
  |--------------------------------------------------------------------------
@@ -11,33 +11,44 @@ let mix = require('laravel-mix').mix;
  |
  | Full API
  | mix.js(src, output);
+ | mix.react(src, output); <-- Identical to mix.js(), but registers React Babel compilation.
+ | mix.preact(src, output); <-- Identical to mix.js(), but registers Preact compilation.
+ | mix.coffee(src, output); <-- Identical to mix.js(), but registers CoffeeScript compilation.
+ | mix.ts(src, output); <-- TypeScript support. Requires tsconfig.json to exist in the same folder as webpack.mix.js
  | mix.extract(vendorLibs);
  | mix.sass(src, output);
  | mix.less(src, output);
+ | mix.stylus(src, output);
+ | mix.postCss(src, output, [require('postcss-some-plugin')()]);
+ | mix.browserSync('my-site.test');
  | mix.combine(files, destination);
+ | mix.babel(files, destination); <-- Identical to mix.combine(), but also includes Babel compilation.
  | mix.copy(from, to);
+ | mix.copyDirectory(fromDir, toDir);
  | mix.minify(file);
  | mix.sourceMaps(); // Enable sourcemaps
  | mix.version(); // Enable versioning.
  | mix.disableNotifications();
- | mix.setPublicPath('path/to/public'); <-- Useful for Node apps.
+ | mix.setPublicPath('path/to/public');
+ | mix.setResourceRoot('prefix/for/resource/locators');
+ | mix.autoload({}); <-- Will be passed to Webpack's ProvidePlugin.
  | mix.webpackConfig({}); <-- Override webpack.config.js, without editing the file directly.
- | mix.autoload(libs);
- | mix.standaloneSass(src, output, pluginOptions = {});
- | mix.options(options);
- | mix.copyDirectory(from, to);
+ | mix.babelConfig({}); <-- Merge extra Babel configuration (plugins, etc.) with Mix's default.
+ | mix.then(function () {}) <-- Will be triggered each time Webpack finishes building.
+ | mix.dump(); <-- Dump the generated webpack config object to the console.
+ | mix.extend(name, handler) <-- Extend Mix's API with your own components.
+ | mix.options({
+ |   extractVueStyles: false, // Extract .vue component styling to file, rather than inline.
+ |   globalVueStyles: file, // Variables file to be imported in every component.
+ |   processCssUrls: true, // Process/optimize relative stylesheet url()'s. Set to false, if you don't want them touched.
+ |   purifyCss: false, // Remove unused CSS selectors.
+ |   terser: {}, // Terser-specific options. https://github.com/webpack-contrib/terser-webpack-plugin#options
+ |   postCss: [] // Post-CSS options: https://github.com/postcss/postcss/blob/master/docs/plugins.md
+ | });
  */
 
 
 mix
     .setPublicPath('web') // assuming that your public path is the symfony web directory
     .js('app/Resources/assets/js/app.js', 'js')
     .sass('app/Resources/assets/sass/app.scss', 'css');
-
-/*
- | If your app requires jQuery, you can manually add it.
- |
- | mix.autoload({
- |     jquery: ['$', 'window.jQuery', 'jQuery']
- | });
-*/