Nostradamus Prophecy Machine
    Have ideas to improve npm?Join in the discussion! »

    laravel-bundler

    0.27.0 • Public • Published

    Laravel Bundler

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

    Modern 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

    # yarn
    yarn add --dev laravel-bundler
    
    # npm
    npm install --dev laravel-bundler 

    Usage

    Create a resources/js/app.js file like

    // Import libraries, eg: Vue.js v2
    import 'vue';
    import {BootstrapVue} from 'bootstrap-vue'
    // You can import styles like this
    import 'bootstrap/dist/css/bootstrap.css'
    import 'bootstrap-vue/dist/bootstrap-vue.css'
    
    Vue.use(BootstrapVue);
    
    new Vue({
        'el': '#app'
    })

    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
        },
        // Incluce vue v2 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=production --progress --hot",
            "prod": "webpack --node-env=production --progress"
        },
        "browserslist": [
            "> 2%",
            "not dead"
        ]
    }

    Update your blade template

    <!-- header -->
    <link href="{{ mix('css/app.css') }}" rel="stylesheet">
    
    <!-- footer -->
    <script src="{{ mix('js/manifest.js') }}"></script>
    <script src="{{ mix('js/vendor.js') }}"></script>
    <script src="{{ mix('js/app.js') }}"></script>

    Update your .gitignore file

    /public/hot
    /public/js/
    /public/css/
    /public/fonts/
    /public/images/
    /public/mix-manifest.json

    Baked Features

    • Webpack 5 and Babel 7 with @babel/preset-env
    • Vue.js v2 support - Recipe
    • Vue.js v3 support - Recipe
    • CSS and SASS|SCSS support
    • PostCSS loader preconfigured with postcss-preset-env
    • 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
    • Clean output directories just before successful build
    • 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 😉
    • Webpack 5 inbuilt persistent cache across builds (opt-in feature) 🚀

    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

    79

    Version

    0.27.0

    License

    MIT

    Unpacked Size

    28.1 kB

    Total Files

    24

    Last publish

    Collaborators

    • avatar