Needlessly Postulating Minds

    laravel-mix-replace-asset-paths

    1.0.3 • Public • Published

    Laravel Mix Replace Asset Paths

    Laravel Mix plugin for replacing asset paths with their versioned equivalent from the manifest. Useful for static HTML sites outside of a Laravel context.

    installation   ·   usage   ·   options   ·   example


    Installation

    npm install laravel-mix-replace-asset-paths

    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" />

    Keywords

    none

    Install

    npm i laravel-mix-replace-asset-paths

    DownloadsWeekly Downloads

    12

    Version

    1.0.3

    License

    MIT

    Unpacked Size

    10.2 kB

    Total Files

    6

    Last publish

    Collaborators

    • elishawitte