Laravel-mix: mix.js() output outside public folder

[plakhin]

• Laravel Mix Version: 1.4.5
• Node Version: v8.6.0
• NPM Version: 5.3.0
• OS: Ubuntu 16.04

The below config creates public/mnt/www/resources/assets/js/dist instead of placing .js files in resources/assets/js/dist.

Would highly appreciate any help.

P.S. I need app.css stay in public/css

webpack.mix.js:

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

mix.sass('resources/assets/sass/app.scss', 'public/css')
   .js('resources/assets/js/app.js', '../resources/assets/js/dist')
   .extract(['axios', 'vue'])
   .version();

[Lednerb]

@JeffreyWay
It seems that there is a general error with the relative paths on the .js method.

I have to following webpack.mix.js in a standalone environment:

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.js('js/theme.js', '../static/dist/')
   .sass('scss/theme.scss', '../static/dist/')
   .combine([
        'node_modules/normalize.css/normalize.css',
        '../static/dist/theme.css'
    ], '../static/dist/theme.css');

As expected the .sass and .combine steps are working correctly but the .js method creates a home/lednerb/path/to/src/folder/static/dist/theme.js path and file.

@plakhin at the moment my workaround is to use an additional mix.copy step to copy the .js to the correct directory. But it's not optimal regarding to version control...

[MattPurland]

This issue has plagued me for the last hour or so, glad it's not just me!

[Lednerb]

Found a workaround or maybe it's the intended way to do this:

mix.setPublicPath('../static/dist') helps with .js and .sass whereas .combine and .copy does not use the public path?

This works for me:

mix.setPublicPath('../static/dist')

     // js file in ../static/dist/theme.js
    .js('js/theme.js', 'theme.js')

      // css file in ../static/dist/theme.css
    .sass('scss/theme.scss', 'theme.css')

     // does not uses the PublicPath (but maybe intended so)
     // copy('node_modules/font-awesome/fonts', 'fonts')  does not copy to ../static/dist/fonts
    .copy('node_modules/font-awesome/fonts', '../static/dist/fonts') 
    .copy('node_modules/flexslider/fonts', '../static/dist/fonts')

     // does not uses the PublicPath (seems more like a bug than at .copy)
     // .combine( [...], 'theme.css') does not copy to ../static/dist/theme.css
    .combine([
        'scss/fonts.css',
        'node_modules/normalize.css/normalize.css',
        'node_modules/skeleton-css/css/skeleton.css',
        'node_modules/font-awesome/css/font-awesome.min.css',
        'node_modules/flexslider/flexslider.css',
        'node_modules/highlight.js/styles/zenburn.css',
        '../static/dist/theme.css'
    ], '../static/dist/theme.css')
    .version();

[amrography]

@Lednerb Your method is working for me, but Mix can't locate mix-manifest.json file, because it's still looking for it under public directory.

So, I used mix.copy() to copy it to original location:

mix.setPublicPath('../static/dist').copy('../static/dist/mix-manifest.json', '../public/mix-manifest.json')

[vqquoc]

@Lednerb woking for me, many thank.