Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ankurk91/laravel-bundler
Modern asset building tool for Laravel framework with better defaults. 📦
https://github.com/ankurk91/laravel-bundler
esbuild laravel laravel-mix webpack
Last synced: 3 months ago
JSON representation
Modern asset building tool for Laravel framework with better defaults. 📦
- Host: GitHub
- URL: https://github.com/ankurk91/laravel-bundler
- Owner: ankurk91
- License: mit
- Created: 2018-11-22T10:42:39.000Z (about 6 years ago)
- Default Branch: main
- Last Pushed: 2024-07-25T05:04:57.000Z (6 months ago)
- Last Synced: 2024-10-29T20:45:08.164Z (3 months ago)
- Topics: esbuild, laravel, laravel-mix, webpack
- Language: JavaScript
- Homepage:
- Size: 1.99 MB
- Stars: 11
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE.txt
Awesome Lists containing this project
README
# Asset Bundler for Laravel
[](https://npm-stat.com/charts.html?package=laravel-bundler&from=2018-11-01)
[](https://www.npmjs.com/package/laravel-bundler)
[](https://github.com/ankurk91/laravel-bundler/tags)
[](LICENSE.txt)
[](https://packagephobia.com/result?p=laravel-bundler)
[](https://github.com/ankurk91/laravel-bundler/actions)
Modern and fast asset building tool for Laravel framework with better defaults.
## Installation
:bulb: This package does not work with [laravel-mix](https://github.com/laravel-mix/laravel-mix);
you must remove `laravel-mix` before using this one
```bash
npm install --save-dev laravel-bundler@^2
```
## Usage
Create a `resources/js/app.js` file like
```js
// 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.
```js
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
```json
{
"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
```blade
```
Update your `.gitignore` file
```.gitignore
/public/dist
```
### Features
* Webpack 5 and Babel 7 with `@babel/preset-env`
* Use [esbuild](https://esbuild.github.io/) to minify CSS and JS :rocket:
* Vue.js v2 support - [Recipe](./wiki/vue-js-v2.md)
* Vue.js v3 support - [Recipe](./wiki/vue-js-v3.md)
* `CSS` and `SASS|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'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:
### Documentation
* [Read the additional docs](./wiki)
### Not in the plan
These features are not in the plan but can be enabled on demand :man_shrugging:
* [Build Notification](https://github.com/RoccoC/webpack-build-notifier)
* [Copy files and folder](https://github.com/webpack-contrib/copy-webpack-plugin)
* [Image compression](https://github.com/webpack-contrib/image-minimizer-webpack-plugin)
* CSS Preprocessors other than `sass|scss`
## License
[MIT](LICENSE.txt) License