webpack.mix.js

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your application. See https://github.com/JeffreyWay/laravel-mix.
 |
 */
let defaultConfig = {
  'proxy': 'http://d8accelerator.localhost',
  'source': 'src',
  'dist': 'assets',
  'inc': 'includes'
};
let config;

// Create config.local.json to override the setup, mainly proxy
try {
  config = require('./config.local.json');
} catch (ex) {
  config = defaultConfig;
}

const proxy = config.proxy,
  mix = require('laravel-mix'),
  fs = require('fs');

/*
 |--------------------------------------------------------------------------
 | Configuration
 |--------------------------------------------------------------------------
 */
mix
  .setPublicPath('assets')
  .disableNotifications()
  .webpackConfig({
    externals: {
      jquery: 'jQuery'
    }
  })
  .options({
    processCssUrls: false
  });

// mix.webpackConfig(webpack => {
//   return {
//     plugins: [
//       new webpack.ProvidePlugin({
//         $: "jquery",
//         jQuery: "jquery",
//         "window.jQuery": "jquery"
//       })
//     ]
//   };
// });

/*
 |--------------------------------------------------------------------------
 | Browsersync
 |--------------------------------------------------------------------------
 */
mix.browserSync({
  proxy: proxy,
  files: [config.source + '/js/**/*.js', config.source + '/css/**/*.css', config.source + '/images/**/**.*'],
  stream: true,
});
/*
 |--------------------------------------------------------------------------
 | SASS
 |--------------------------------------------------------------------------
 */
// Minify all the css.
mix
  .sass(config.source + '/sass/priority.style.scss', 'css')
  .minify(config.dist + '/css/priority.style.css');
mix
  .sass(config.source + '/sass/main.style.scss', 'css')
  .minify(config.dist + '/css/main.style.css');
mix
  .sass(config.source + '/sass/ckeditor.style.scss', 'css')
  .minify(config.dist + '/css/ckeditor.style.css');
mix
  .sass(config.source + '/sass/admin.style.scss', 'css')
  .minify(config.dist + '/css/admin.style.css');

if (!mix.inProduction()) {
  mix.webpackConfig({
      devtool: 'source-map'
    })
    .sourceMaps();
}

// Disable css url
mix.options({
  processCssUrls: false
});

/*
 |--------------------------------------------------------------------------
 | JS
 |--------------------------------------------------------------------------
 */
mix.js(config.source + '/js/main.script.js', 'js')
  .extract(["popper.js", "bootstrap"]);
// mix.scripts([
//   config.dist + '/js/main.script.js',
//   config.source + '/js/partials/*.js',
//   config.source + '/components/**/*.js'
// ], config.dist + '/js/main.script.js');

/*
 |--------------------------------------------------------------------------
 | Image
 |--------------------------------------------------------------------------
 */
// Copy images whilst optimising them
require('laravel-mix-imagemin');
mix.imagemin(
  'images/**/**.*', // pattern to catch
  {
    context: config.source, // within this directory. Publish path is inherited.
    force: true // force override
  }, {
    optipng: {
      optimizationLevel: 3 // 0 ~ 10
    },
    jpegtran: null,
    plugins: [
      require('imagemin-mozjpeg')({
        quality: 70,
        progressive: false,
      }),
    ],
  }
);

/*
 |--------------------------------------------------------------------------
 | Update Cache busting string
 |--------------------------------------------------------------------------
 */
mix.extend('cachebust', function(i, cb) {
  let d = new Date(),
    dateString = d.getFullYear() + '.' + ((d.getMonth() < 10 ? '0' : '') + d.getMonth()) + '.' + ((d.getDate() < 10 ? '0' : '') + d.getDate() + '.' + d.getMilliseconds());
  fs.writeFile(
    config.inc + '/version.inc',
    '<?php define("CSS_BUILD_VERSION", "' + dateString + '");',
    function() {}
  );
});

if (mix.inProduction()) {
  mix.cachebust();
}