js, sass and css mix with versioning

Instead of

.styles([
      'backend/app.css',
      'plugin/bootstrap-select/bootstrap-select.min.css'
], 'public/css/backend.css')

Try this

mix.styles([
    'backend/app.css',
    'plugin/bootstrap-select/bootstrap-select.min.css'
], 'public/css/backend.css');

and put in your .gitignore

resources/assets/css/backend/app.css

Thank you @joaomantovani .

Yes i realized it worked better if i didn't chain mix.

This is my webpack.mix:

const { 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 the application as well as bundling up all the JS files.
 |
 */

mix.sass('resources/assets/sass/frontend/app.scss', 'public/css/frontend/dist/frontend.css');
mix.sass('resources/assets/sass/backend/app.scss', 'public/css/backend/dist/backend.css');

mix.styles([
    'public/css/frontend/dist/frontend.css',
    'resources/assets/css/plugin/bootstrap-select/bootstrap-select.min.css'
], 'public/css/frontend/frontend.css');

mix.combine([
    'public/css/backend/dist/backend.css',
    'resources/assets/css/plugin/bootstrap-select/bootstrap-select.min.css'
], 'public/css/backend/backend.css');

mix.js('resources/assets/js/backend/customers/customers.js', 'public/js/backend/customers/customers.js');

mix.js([
        'resources/assets/js/frontend/app.js',
        'resources/assets/js/plugin/sweetalert/sweetalert.min.js',
        'resources/assets/js/plugins.js'
    ], 'public/js/frontend/frontend.js');
mix.js([
        'resources/assets/js/backend/app.js',
        'resources/assets/js/plugin/bootstrap-select/bootstrap-select.min.js',
        'resources/assets/js/plugin/sweetalert/sweetalert.min.js',
        'resources/assets/js/plugins.js'
    ], 'public/js/backend/backend.js');

Please correct me if im doing this wrong.

1. i convert my 2 sass filer for front and back to css dist files with mix.sass
2. i convert/combine these 2 with additional css into the final css files I cant see any differens between mix.styles and mix.combine, please tell me witch one i should use?
3. this is my vue and in Elexir i did this:

 .webpack('./resources/assets/js/backend/customers/customers.js', './resources/assets/js/dist/backend/customers/customers.js')

and got an js file that started with this type of code

/******/ (function(modules) { // webpackBootstrap
/******/    // The module cache
/******/    var installedModules = {};

and the rest of the file where chunks like this

/***/ function(module, exports, __webpack_require__) {

"use strict";
eval("/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_vue_router__ = __webpack_require__(58);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_vue_router___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_vue_router__);\n\n\nvar customersRoute = __webpack_require__(26);\nvar projectsRoute = __webpack_require__(27);\nvar routeLists = [];\nvar routes = routeLists.concat(customersRoute, projectsRoute);\n\n/* harmony default export */ exports[\"a\"] = new __WEBPACK_IMPORTED_MODULE_0_vue_router___default.a({\n    history: true,\n    routes: routes\n});//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiMC5qcyIsInNvdXJjZXMiOlsid2VicGFjazovLy9yZXNvdXJjZXMvYXNzZXRzL2pzL2JhY2tlbmQvY3VzdG9tZXJzL3JvdXRlcy9yb3V0ZXIuanM/NThkZCJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgUm91dGVyIGZyb20gJ3Z1ZS1yb3V0ZXInXG5cbmNvbnN0IGN1c3RvbWVyc1JvdXRlID0gcmVxdWlyZSgnLi9jdXN0b21lcnMvY3VzdG9tZXJzJyk7XG5jb25zdCBwcm9qZWN0c1JvdXRlID0gcmVxdWlyZSgnLi9wcm9qZWN0cy9wcm9qZWN0cycpO1xuY29uc3Qgcm91dGVMaXN0cyA9IFtdO1xuY29uc3Qgcm91dGVzID0gcm91dGVMaXN0cy5jb25jYXQoY3VzdG9tZXJzUm91dGUsIHByb2plY3RzUm91dGUpO1xuXG5leHBvcnQgZGVmYXVsdCBuZXcgUm91dGVyKHtcbiAgICBoaXN0b3J5OiB0cnVlLFxuICAgIHJvdXRlc1xufSk7XG5cblxuLy8gV0VCUEFDSyBGT09URVIgLy9cbi8vIHJlc291cmNlcy9hc3NldHMvanMvYmFja2VuZC9jdXN0b21lcnMvcm91dGVzL3JvdXRlci5qcyJdLCJtYXBwaW5ncyI6IkFBQUE7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0EiLCJzb3VyY2VSb290IjoiIn0=");

/***/ },

Now with

mix.js('resources/assets/js/backend/customers/customers.js', 'public/js/backend/customers/customers.js');

i get an js file that started with this type of code

/******/ (function(modules) { // webpackBootstrap
/******/    // The module cache
/******/    var installedModules = {};

but the rest of the file where plain code like this

/***/ (function(module, exports, __webpack_require__) {

var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;/*!
 * jQuery JavaScript Library v3.1.1
 * https://jquery.com/
 *
 * Includes Sizzle.js
 * https://sizzlejs.com/
 *
 * Copyright jQuery Foundation and other contributors
 * Released under the MIT license
 * https://jquery.org/license
 *
 * Date: 2016-09-22T22:30Z
 */
( function( global, factory ) {

    "use strict";

    if ( typeof module === "object" && typeof module.exports === "object" ) {

        // For CommonJS and CommonJS-like environments where a proper `window`
        // is present, execute the factory and get jQuery.
        // For environments that do not have a `window` with a `document`
        // (such as Node.js), expose a factory as module.exports.
        // This accentuates the need for the creation of a real `window`.
        // e.g. var jQuery = require("jquery")(window);
        // See ticket #14549 for more info.
        module.exports = global.document ?
            factory( global, true ) :
            function( w ) {
                if ( !w.document ) {
                    throw new Error( "jQuery requires a window with a document" );
                }
                return factory( w );
            };
    } else {
        factory( global );
    }

1. i mix/combine some js to 1 frontend.js and 1 backend.js

Now i want to version ONLY:

public/js/backend/customers/customers.js

public/js/frontend/frontend.js

public/js/backend/backend.js

How can i do that?

I don't know if this is going to help you, but you may try:

Put the version parameter in your files

mix.js('resources/assets/js/backend/customers/customers.js', 'public/js/backend/customers/customers.js')
.version();

mix.js([
        'resources/assets/js/frontend/app.js',
        'resources/assets/js/plugin/sweetalert/sweetalert.min.js',
        'resources/assets/js/plugins.js'
    ], 'public/js/frontend/frontend.js')
.version();

mix.js([
        'resources/assets/js/backend/app.js',
        'resources/assets/js/plugin/bootstrap-select/bootstrap-select.min.js',
        'resources/assets/js/plugin/sweetalert/sweetalert.min.js',
        'resources/assets/js/plugins.js'
    ], 'public/js/backend/backend.js')
.version();

Now in the blade, load the versioned files using the mix function

<!-- customer.js -->
<script src="{{ mix('/backend/customers/customers.js') }}"></script>

<!-- frontend.js -->
<script src="{{ mix('/js/frontend/frontend.js') }}"></script>

<!-- backend.js -->
<script src="{{ mix('/js/backend/backend.js') }}"></script>