Webpack Laravel Mix Manifest

A webpack plugin that generates Laravel framework compatible mix-manifest.json file.

If you are using webpack 2 or 3 then install version 1.x instead.

The plug-in version corresponding to the webpack version

| webpack version | plugin version | | :-------------: | :-----------------------------------------------------------------------------------------------------------------------------------------------: | | 2.x or 3.x | 1.0.x | | 4.x | 2.1.x or v2.2 | | 5.0 | 3.x - current branch |

Use Case

If you are not using Laravel Mix to bundle your assets in Laravel php framework, and you still want to utilize mix() helper method, this plugin can help you in generating mix-manifest.json

Supported:

• [x] TypeScript
• [x] ECMAScript 2015+ or Babel
• [x] CommonJS

Installation

The plugin is available via npm:

npm install webpack-laravel-mix-manifest --save-dev

If you are using yarn:

yarn add webpack-laravel-mix-manifest --dev

Examples

Using the ES module (Babel) webpack configuration usage

import { WebpackLaravelMixManifest } from 'webpack-laravel-mix-manifest';

export default {
  plugins: [
    // Write out mix-manifest.json to build directory.
    new WebpackLaravelMixManifest(),
  ],
};

Example 👉 ES module(Babel) Example

Using CommonJS webpack configuration usage

const { WebpackLaravelMixManifest } = require('webpack-laravel-mix-manifest');

module.exports = {
  plugins: [
    // Write out mix-manifest.json to build directory.
    new WebpackLaravelMixManifest(),
  ],
};

Example 👉 CommonJS Example

Laravel usage

Assume that the generated public/mix-manifest.json content is:

{
  "/js/main.js": "/js/main-be4b86e10e835384d714.js"
}

Blade usage:

<script src="{{ mix('js/main.js') }}"></script>

Browser output:

<script src="/js/main-be4b86e10e835384d714.js"></script>

Configuration options

You can customize the name of the generated JSON file name.

new WebpackLaravelMixManifest('mix-manifest.json');

License

This package follows the MIT open source agreement.