Laravel-Mix: Different output path for development and production build (by the example of css)

Question

All we see in webpack.mix when after crafting the application is below:

const { mix } = require('laravel-mix');
mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css');

I know how to run development and production build, but don't know how to customize it. In this question, we consider the example about compiling sass to css in different path depending on build type, however I suppose working with es6 and pug building will be similar.

Project structure:

📁 public

　　　📁 css-prod

📁 resources

　📁 assets

　　　📁 sass

　　　📁 css-dev

I want:

• Development executing: files from resources/assets/sass compile resources/assets/css-dev, no uglification, no concatenation.
• Production executing: files from resources/assets/sass compile to resources/assets/css-prod, uglify and concatenate.

Where I should to define these settings?

Answer 1

This can be done in webpack.mix.js:

...
if (mix.inProduction()) {
  jsOutputDir = '/path/to/production';
  cssOutputDir = '/path/to/production';
} else {
  jsOutputDir = '/path/to/development';
  cssOutputDir = '/path/to/development';      
}

mix.js('resources/assets/js/xxxx.js', jsOutputDir)
   .css('resources/assets/css/xxxx.css',cssOutputdir)

now, run npm run dev or npm run production, your JavaScript and css files in different directory, good luck.