Installation

Usage

mix.then(async stats => {
  const laravelMixReplaceAssetPaths = require('laravel-mix-replace-asset-paths');
  await laravelMixReplaceAssetPaths({
    publicPath: 'dist',
    stats,
  });
});

Options

Configure the plugin by passing an options object as the first argument.

| Option | Default | Details | | ---------------- | --------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | stats | undefined | Webpack stats containing information for all compiled assets. When the stats object is passed, only compiled assets will be scanned for files to replace. If no stats are passed, all files in the publicPath folder matching the whitelist pattern are scanned. | | publicPath | dist | Public path where the compiled assets (and the mix-manifest.json) are located. | | whitelist | ['*.html'] | Whitelist of files for which the asset paths should be replaced. | | pattern | /(\/?(?:css\|js\|images)\/[^"']+)/g | Regular expression for matching assets to replace. Should contain exactly one capturing group for the asset path. It defaults to a very permissive expression matching all css, js and image files. It's recommended to use a more restricting expression. See example. | | manifest | mix-manifest.json inside the publicPath folder. | Contents of your mix-manifest.json file. | | replaceOptions | {} | Custom options for the replace-in-file package. |

Example

The following example makes use of the laravel-mix-twig-to-html and laravel-mix-make-file-hash plugins to create a simple static site setup with Laravel Mix using Twig:

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

const config = {
  srcPath: 'src',
  distPath: 'dist',
  deployPath: null,
};

const source = {
  images: path.resolve(config.srcPath, 'images'),
  scripts: path.resolve(config.srcPath, 'js'),
  styles: path.resolve(config.srcPath, 'css'),
  templates: path.resolve(config.srcPath, 'templates'),
};

/**
 * 📝 Templates
 * Compile Twig files to static HTML
 */
require('laravel-mix-twig-to-html');
mix.twigToHtml({
  files: [
    {
      template: path.resolve(__dirname, source.templates, '**/*.{twig,html}'),
      inject: false,
    },
  ],
  fileBase: source.templates,
  twigOptions: {
    filters: {
      asset(value) {
        return mix.inProduction() ? `{{ mix(${value}) }}` : value;
      },
    },
  },
});

/**
 * 📣 Versioning
 * Add file hashes to all assets for cache-busting
 * Converts the query-based versioning of laravel-mix to filename-based versioning:
 * main.css?id=abcd1234 => main.abcd1234.css
 */
if (mix.inProduction()) {
  mix.version();
  // Run after mix finishes
  mix.then(async stats => {
    const laravelMixMakeFileHash = require('laravel-mix-make-file-hash');
    const laravelMixReplaceAssetPaths = require('laravel-mix-replace-asset-paths');
    const manifest = await laravelMixMakeFileHash({
      publicPath: config.distPath,
      manifestFilePath: path.join(config.distPath, 'mix-manifest.json'),
      fileTypesBlacklist: ['html'],
    });
    await laravelMixReplaceAssetPaths({
      pattern: /{{ mix\(([^}]+)\) }}/g,
      stats,
    });
  });
}

<link rel="stylesheet" href="{{ 'css/main.css' | asset }}">

In development mode this will compile to:

<link rel="stylesheet" href="css/main.css" />

In production mode, it will compile to:

<link rel="stylesheet" href="css/main.abcd1234.css" />