Upgrading from Elixir to Mix

Hello,

I am trying to go from Elixir to Mix, but nothing works as it used to. I am really confused because almost everytime I run npm run dev, output has different size.. it's doing what it wants.

What I do: I have master app.js file that gets compiled, then I move it from public/ to resources/ and merge it with other compiled .js files and the final result is in public/ That's how it used to work with Elixir. Now, there is a lot of bugs. Paths are totally weird - sometimes public/ is needed, sometimes not.

Here is my old gulpfile.js

const elixir = require('laravel-elixir');

require('laravel-elixir-env');
require('laravel-elixir-vue-2');

elixir(mix => {
    mix.sass([
        'main.scss',
        'velonic_helper.scss',
        'velonic_style.scss',
    ], 'public/css/app.css');

    mix.webpack('app.js');

    mix.copy('public/css/app.css', 'resources/assets/css/app.css');
    mix.copy('public/js/app.js', 'resources/assets/js/main.js');

    // app.js
    mix.scripts([
        'main.js',
        'modernizr.js',
        'pace.js',
        'wow.js',
        'jquerynicescroll.js',
        'jqueryscrollTo.js',
        'spin.min.js',
        'ladda.min.js',
        'velonic.js',
    ], 'public/js/app.js');

    // app.css
    mix.styles([
        'app.css',
        'animate.css',
        'font-awesome.min.css',
        'ionicons.min.css',
        'material-design-iconic-font.min.css',
        'ladda-themeless.min.css',
    ], 'public/css/app.css');
});

Here is my new webpack.mix.js

const { mix } = require('laravel-mix');
const webpack = require('webpack')

mix.webpackConfig({
    plugins: [
        new webpack.IgnorePlugin(/pusher-js/),
    ]
});

mix.sass('resources/assets/sass/app.scss', 'public/css/app.css')
mix.js('resources/assets/js/app.js', '/js/app.js');

mix.copy('public/css/app.css', 'resources/assets/css/app.css');
mix.copy('public/js/app.js', 'resources/assets/js/main.js');

// app.js
mix.scripts([
    'resources/assets/js/main.js',
    'resources/assets/js/modernizr.js',
    'resources/assets/js/pace.js',
    'resources/assets/js/wow.js',
    'resources/assets/js/jquerynicescroll.js',
    'resources/assets/js/jqueryscrollTo.js',
    'resources/assets/js/spin.min.js',
    'resources/assets/js/ladda.min.js',
    'resources/assets/js/velonic.js',
], 'public/js/app.js');

// app.css
mix.styles([
    'resources/assets/css/app.css',
    'resources/assets/css/animate.css',
    'resources/assets/css/font-awesome.min.css',
    'resources/assets/css/ionicons.min.css',
    'resources/assets/css/material-design-iconic-font.min.css',
    'resources/assets/css/ladda-themeless.min.css',
], 'public/css/app.css');

js method compiled app.js correctly, but scripts method does something weird. It kind of repeats itself. If I open the file, things like modernizr/pace/others are there 1-4 times (random, seriously) Other thing is, it doesn't compile app.js as it should - it doesn't put new things in there. I can make any change and it won't be there.

I am tired of trying. I even tried to put compiled libs into one file and include it into app.js and compile it at once with js method but that raised multiple errors because it couldn't find stuff in node_modules.

This is where the paths are getting weird

mix.sass('resources/assets/sass/app.scss', 'public/css/app.css')
mix.js('resources/assets/js/app.js', '/js/app.js');

If I put public/ to the js method, it creates public folder inside public folder.

I need ANY help, any advice on how to go about using Mix. If you have any idea, let me know!

Thank you