Laravel Bundler
Modern asset building tool for Laravel framework with better defaults.
Installation
:bulb: This package does not work with laravel-mix
; you must remove laravel-mix
before using this one
yarn add --dev laravel-bundler
npm install --dev laravel-bundler
Usage
Create a resources/js/app.js
file like
import 'vue';
import {BootstrapVue} from 'bootstrap-vue'
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: [
],
},
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
autoprefixer
- Font and image files handling
- Full HMR support for Vue, even for CSS :fire:
- 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_
:wink: - Intelligent SourceMap based on mode
- Can auto-reload web-browser when blade templates gets changed :wink:
- Webpack 5 inbuilt persistent cache across builds (opt-in feature) :rocket:
Documentation
Not in the plan
These features are not in the plan but can be enabled on demand :man_shrugging:
License
MIT License