laravel-bundler

2.7.0 • Public • Published

Asset Bundler for Laravel

downloads npm-version github-tag license install size tests

Modern and fast asset building tool for Laravel framework with better defaults.

Installation

💡 This package does not work with laravel-mix; you must remove laravel-mix before using this one

npm install --save-dev laravel-bundler@^2

Usage

Create a resources/js/app.js file like

// Example: Vue.js v2 with bootstrap
import Vue from 'vue';
// You can import styles like this
import 'bootstrap/dist/css/bootstrap.css'

import RegularComponent from './Regular.vue'

const LazyLoadedComponent = () => import('./HeavyComponent.vue');

new Vue({
    el: "#app",
    components: {
        RegularComponent,
        LazyLoadedComponent,
    }
});

Create a webpack.config.js file on your project root and remove webpack.mix.js if exists.

import webpack from 'webpack'
import {createConfig} from 'laravel-bundler';
import vue2Recipe from 'laravel-bundler/src/recipes/vue-2.js';

export default createConfig({
        entry: {
            app: './resources/js/app.js',
        },
        plugins: [
            //
        ],
        // Other webpack configs may go here
    },
    // Include vue v2 recipe
    // Dont forget to install required packages by this recipe
    vue2Recipe
);

Update your package.json file

{
    "type": "module",
    "scripts": {
        "dev": "webpack --define-process-env-node-env=development --progress",
        "watch": "webpack watch --define-process-env-node-env=development --progress",
        "hot": "webpack serve --define-process-env-node-env=development --progress --hot",
        "hot:https": "npm run hot -- --https",
        "prod": "webpack --define-process-env-node-env=production --progress"
    },
    "browserslist": [
        "> 2%",
        "not dead"
    ],
    "babel": {
        "presets": [
            [
                "@babel/preset-env",
                {
                    "bugfixes": true
                }
            ]
        ],
        "plugins": []
    }
}

Update your blade template

<!-- header -->
<link href="{{ mix('css/app.css', 'dist') }}" rel="stylesheet">

<!-- footer -->
<script src="{{ mix('js/manifest.js', 'dist') }}"></script>
<script src="{{ mix('js/vendor.js', 'dist') }}"></script>
<script src="{{ mix('js/app.js', 'dist') }}"></script>

Update your .gitignore file

/public/dist

Features

  • Webpack 5 and Babel 7 with @babel/preset-env
  • Use esbuild to minify CSS and JS 🚀
  • Vue.js v2 support - Recipe
  • Vue.js v3 support - Recipe
  • CSS and SASS|SCSS support
  • PostCSS loader pre-configured with autoprefixer
  • Font and image files handling
  • Full HMR support for Vue, even for CSS 🔥
  • Extract all css to a separate file (based on entry)
  • Accepts css/scss file as entry
  • Extract all vendor js to a separate file
  • Dynamic import (code splitting) support 🧙‍♂️
  • Clean the output directory before emitting the assets
  • Generates a mix-manifest.json file which is compatible with Laravel's mix() helper
  • Load environment variables from .env file that are prefixed with MIX_ 😉
  • Intelligent SourceMap based on mode
  • Can auto-reload web-browser when blade templates gets changed 😉

Documentation

Not in the plan

These features are not in the plan but can be enabled on demand 🤷‍♂️

License

MIT License

Package Sidebar

Install

npm i laravel-bundler

Weekly Downloads

154

Version

2.7.0

License

MIT

Unpacked Size

23.3 kB

Total Files

27

Last publish

Collaborators

  • ankurk91