https://github.com/innocenzi/laravel-encore
Integrate Webpack Encore with Laravel
https://github.com/innocenzi/laravel-encore
laravel-encore webpack-encore
Last synced: 8 months ago
JSON representation
Integrate Webpack Encore with Laravel
- Host: GitHub
- URL: https://github.com/innocenzi/laravel-encore
- Owner: innocenzi
- License: mit
- Created: 2020-06-12T04:49:11.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-02-27T09:58:33.000Z (over 2 years ago)
- Last Synced: 2025-02-01T09:22:38.154Z (8 months ago)
- Topics: laravel-encore, webpack-encore
- Language: PHP
- Homepage: https://github.com/symfony/webpack-encore
- Size: 54.7 KB
- Stars: 3
- Watchers: 2
- Forks: 4
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
Laravel Encore
This package helps integrating [Webpack Encore](https://symfony.com/doc/current/frontend/encore) with Laravel.
> **Note**: while this package should work, I'm not planning on fixing potential issues or updating it, since I'm no longer using it. If you want a better development environment, consider ~~[Laravel Vite](https://github.com/innocenzi/laravel-vite)~~ using the new Vite integration from the Laravel team.
## Installation
You can install the package via composer:
```bash
composer require innocenzi/laravel-encore
```
## Installing Encore
Remove `laravel-mix` and add `@symfony/webpack-encore`.
```bash
yarn remove laravel-mix
yarn add @symfony/webpack-encore --dev
```
Remove your `webpack.mix.js` and create a `webpack.config.js`. Here is an example:
```js
const Encore = require('@symfony/webpack-encore');
if (!Encore.isRuntimeEnvironmentConfigured()) {
Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
}
Encore
.setOutputPath('public/build/')
.setPublicPath('/build')
.addEntry('app', './resources/js/app.js')
.splitEntryChunks()
.enableSingleRuntimeChunk()
.enablePostCssLoader()
.cleanupOutputBeforeBuild()
.enableSourceMaps(!Encore.isProduction())
.enableVersioning(Encore.isProduction());
module.exports = Encore.getWebpackConfig();
```
Make sure `resources/js/app.js` exists. Ideally, it should import your CSS as well, but if you don't want to, you can add [`addStyleEntry`](https://symfony.com/doc/current/frontend/encore/simple-example.html#compiling-only-a-css-file) to your Encore configuration.
```js
// resources/js/app.js
import '../css/app.css';
```
Make sure you add `public/build/` (or whatever output path you set) to your `.gitignore`.
Last, but not least, you should replace the scripts in your `package.json` with the following:
```json
// package.json
{
"scripts": {
"dev-server": "encore dev-server",
"dev": "encore dev",
"watch": "encore dev --watch",
"build": "encore production --progress"
}
}
```
## Usage
In your blade components, use the `@styles` and `@scripts` directives to include the assets generated by Encore.
```blade
Laravel
@styles
@scripts
Hello.
```
By default, it will look for the `app` entries, but you can change them by passing an entry name in each directive.
```blade
@styles('app')
@scripts('admin')
```
If you used [static assets](https://symfony.com/doc/current/frontend/encore/copy-files.html), you can use `Encore::asset('build/path/to/your/asset.png')` to include it. Under the hood, it's just a mapping to the [manifest.json](https://symfony.com/doc/current/frontend/encore/versioning.html).
## License
The MIT License (MIT). Please see [License File](LICENSE.md) for more information.