laravel-mix config

readme.md

Laravel Mix configuration file

This is a webpack config file intended for use with Laravel Mix. Changes has been made to reflect a more structured filestructure with files being served from a ./dist-folder, and source files will remain inside a ./src-folder. Some changes has also been made to make browsersync work a bit more generic.

Installation

Assuming you're using the package.json-file from this gist, remember to do the following:

npm install --save-dev laravel-mix
cp -r node_modules/laravel-mix/setup/webpack.mix.js ./

Laravel Mix no longer requires a user-maintained webpack.config.js in your project's root folder. By using the scripts supplied in the package.json, the compile process will use the supplied webpack config by Laravel Mix.

Folder structure

project
|    .gitignore
|    package.json
|    webpack.mix.js
|
└─── dist
|    └─── index.html
|    |
|    └─── css
|    |    └─── app.css
|    |    
|    └─── js
|         └─── app.js
|
└─── src
|    └─── js
|    |    └─── app.js
|    |
|    └─── sass
|         └─── app.scss
|

Why?

Webpack makes it a lot easier to, eg, load third-party JS-modules into a single JS-file. It also supports tree-shaking. It's faster than gulp and is way more configurable. Laravel Mix makes this easier and works out of the box. I needed an easy-to-deploy configuration that would work in any project, and Laravel Mix does this perfectly.

Remember!

When using extract, for example if you need to pull in jQuery and Bootstrap via NPM, Laravel Mix creates a manifest.js and vendor.js. So instead of src'ing to jQuery.min.js and bootstrap.min.js, you'll need to link to manifest.js and vendor.js - in that order - to make it work. Also remember to add your own app.js.

Like this:

<script src="/js/manifest.js"></script>
<script src="/js/vendor.js"></script>
<script src="/js/app.js"></script>

app.js

// jQuery import
global.jQuery = require('jquery');
var $ = global.jQuery;
window.$ = $;

// Bootstrap 4 depends on Popper.js
// Popper.js import
//import Popper from 'popper.js';
//window.Popper = Popper;

// JS IMPORTS

package.json

{
    "name": "",
    "version": "0.0.1",
    "description": "",
    "main": "",
    "keywords": [],
    "scripts": {
        "dev":        "NODE_ENV=development webpack --config=node_modules/laravel-mix/setup/webpack.config.js --progress --hide-modules",
        "watch":      "NODE_ENV=development webpack --config=node_modules/laravel-mix/setup/webpack.config.js --watch --progress --hide-modules",
        "hot":        "NODE_ENV=development webpack-dev-server --config=node_modules/laravel-mix/setup/webpack.config.js --inline --hot",
        "production": "NODE_ENV=production webpack --config=node_modules/laravel-mix/setup/webpack.config.js --progress --hide-modules"
    },
    "author": {
        "name": "",
        "email": "",
        "url": ""
    },
    "repository": {
        "type": "",
        "url": ""
    },
    "bugs": {
        "url": ""
    },
    "license": "MIT",
    "devDependencies": {
    }
}

webpack.mix.js

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

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for your application, as well as bundling up your JS files.
 |
 */

mix.setPublicPath('dist')

// This part is Bootstrap 4-friendly
// If you need Bootstrap 3, see below
// Both examples will autoload jQuery, and extract jQuery before adding Bootstrap JS
// The Bootstrap 4-example will also autoload and extract Popper.js
mix.js('src/js/app.js', 'js/')
   .sass('src/sass/app.scss', 'css/')
   .autoload({
       jquery: ['$', 'jQuery', 'jquery', 'window.jQuery'],
       'popper.js/dist/umd/popper.js': ['Popper']
   })
   .extract(['jquery', 'popper.js', 'bootstrap'])
   .options({
       processCssUrls: false
   });

// Bootstrap 3
//mix.js('src/js/app.js', 'js/')
//   .sass('src/sass/app.scss', 'css/')
//   .autoload({
//       jquery: ['$', 'jQuery', 'jquery', 'window.jQuery']
//   })
//   .extract(['jquery', 'bootstrap-sass']);

// Full API
// mix.js(src, output);
// mix.react(src, output); <-- Identical to mix.js(), but registers React Babel compilation.
// mix.extract(vendorLibs);
// mix.sass(src, output);
// mix.standaloneSass('src', output); <-- Faster, but isolated from Webpack.
// mix.fastSass('src', output); <-- Alias for mix.standaloneSass().
// mix.less(src, output);
// mix.stylus(src, output);
// mix.browserSync('my-site.dev');
// 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');
// 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.then(function () {}) <-- Will be triggered each time Webpack finishes building.
// mix.options({
//   extractVueStyles: false, // Extract .vue component styling to file, rather than inline.
//   processCssUrls: true, // Process/optimize relative stylesheet url()'s. Set to false, if you don't want them touched.
//   purifyCss: false, // Remove unused CSS selectors.
//   uglify: {}, // Uglify-specific options. https://webpack.github.io/docs/list-of-plugins.html#uglifyjsplugin
//   postCss: [] // Post-CSS options: https://github.com/postcss/postcss/blob/master/docs/plugins.md
// });