1. webpack-laravel-mix-manifest
🐶A webpack plugin that generates Laravel framework compatible mix-manifest.josn file.
webpack-laravel-mix-manifest
Package: webpack-laravel-mix-manifest
Created by: medz
Last modified: Tue, 28 Jun 2022 23:57:14 GMT
Version: 3.1.2
License: MIT
Downloads: 5,550
Repository: https://github.com/medz/webpack-laravel-mix-manifest

Install

npm install webpack-laravel-mix-manifest
yarn add webpack-laravel-mix-manifest

Webpack Laravel Mix Manifest

Node.js Package
Node.js CI
version
license
downloads

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.

RELATED POST

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin