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

This is a simple example on how my file- and folder structure looks like in a Mix-project.

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>

Compiling assets

Again, if you're using the scripts supplied in the package.json-example in this gist, you have the following commands at hand:

• npm run dev: This is the typical quick compile while you're developing. It will compile all assets but no minification will take place.
• npm run watch: If you want your files watched for changes, you'll want to use this one. As Mix can also ships with-, and can easily be configured to run browserSync.
• npm run hot: Hot Reloading is like Watch. It will watch for changes inside your files, but it will keep the current state of the component in the browser.
• npm run production: Everything is compiled and minified for production.

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 node_modules/webpack/bin/webpack.js --config=node_modules/laravel-mix/setup/webpack.config.js --progress --hide-modules",
        "watch":      "NODE_ENV=development node_modules/webpack/bin/webpack.js --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 node_modules/webpack/bin/webpack.js --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
// });

What if we need to use vue.config.js?
How could we do that?
If following this tutorial but my vue.config.js is not getting read.
Is there a way to add custom vue configuration to webpack mix?

@dahousecat I'm not sure Laravel Mix is the best solution for Vue projects. Vue is a great asset in Laravel projects but I would make Vue handle the asset compilation if Vue was the main framework.

However, if I understand your issue correctly (and please do insist if I'm wrong), you want to expand the webpack config?

If that's the case, then you can use mix.extend() to extend the webpack configuration. There's more info on how to use that in the Laravel Mix documentation.

Yes, you understand my issue correctly.

I subsequently found this solution is working great for me:

mix.webpackConfig({
    resolve: {
        alias: {
            videojs: 'video.js',
            WaveSurfer: 'wavesurfer.js',
            RecordRTC: 'recordrtc'
        }
    }
});

@dahousecat Great! I'm glad you got it solved. I was about to edit my comment and mention mix.webpackConfig() as well.