laravel-bundler
Asset Bundler for Laravel
Modern and fast 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
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 :rocket:
- Vue.js v2 support - Recipe
- Vue.js v3 support - Recipe
CSS
andSASS|SCSS
support- PostCSS loader pre-configured 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
- Dynamic import (code splitting) support :mage_man:
- Clean the output directory before emitting the assets
- Generates a
mix-manifest.json
file which is compatible with Laravel'smix()
helper - Load environment variables from
.env
file that are prefixed withMIX_
:wink: - Intelligent SourceMap based on mode
- Can auto-reload web-browser when blade templates gets changed :wink:
Documentation
Not in the plan
These features are not in the plan but can be enabled on demand :man_shrugging:
- Build Notification
- Copy files and folder
- Image compression
- CSS Preprocessors other than
sass|scss
License
MIT License
Dependencies
@babel/core: ^7.24.3@babel/preset-env: ^7.24.3autoprefixer: ^10.4.19babel-loader: ^9.1.3browserslist-to-esbuild: ^2.1.1case-sensitive-paths-webpack-plugin: ^2.4.0chalk: ^5.3.0css-loader: ^6.10.0css-minimizer-webpack-plugin: ^6.0.0dotenv: ^16.4.5dotenv-expand: ^11.0.6esbuild: ^0.20.2file-loader: ^6.2.0get-port: ^7.1.0mini-css-extract-plugin: ^2.8.1postcss: ^8.4.38postcss-loader: ^8.1.1sass: ^1.72.0sass-loader: ^14.1.1terser-webpack-plugin: ^5.3.10webpack: ^5.91.0webpack-cli: ^5.1.4webpack-dev-server: ^5.0.4webpack-laravel-mix-manifest: ^3.1.2webpack-merge: ^5.10.0webpack-remove-empty-scripts: ^1.0.4yargs-parser: ^21.1.1