laravel-bundler

    0.38.1 • Public • Published

    Laravel Bundler

    downloads npm-version github-tag license tests install-size

    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 

    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'
    
    const LazyLoadedComponent = () => import('./HeavyComponent.vue')
    
    new Vue({
        el: "#app",
        components: {
            LazyLoadedComponent,
        }
    });

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

    const webpack = require('webpack');
    
    module.exports = require('laravel-bundler')({
            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
        require('laravel-bundler/src/recipes/vue-2.js')
    );

    Update your package.json file

    {
        "scripts": {
            "dev": "webpack --node-env=development --progress",
            "watch": "webpack watch --node-env=development --progress",
            "hot": "webpack serve --node-env=development --progress --hot",
            "hot:https": "npm run hot -- --https",
            "prod": "webpack --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
    • 2x faster SASS compilation with sass-embedded 🚀
    • 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
    • mix-manifest.json 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

    Install

    npm i laravel-bundler

    DownloadsWeekly Downloads

    147

    Version

    0.38.1

    License

    MIT

    Unpacked Size

    22.3 kB

    Total Files

    26

    Last publish

    Collaborators

    • ankurk91