This package helps to integrate Webpack Encore with Laravel.
This package was originally authored by @innocenzi. As they claimed to not going to maintain it anymore, I decided to fork it and continue to provide support for it.
You can install the package via composer:
composer require terpomoj/laravel-encoreRemove laravel-mix and add @symfony/webpack-encore.
npm remove laravel-mix
npm install @symfony/webpack-encore --devRemove your webpack.mix.js and create a webpack.config.js. Here is an example:
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 to your Encore configuration.
// 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:
// package.json
{
"scripts": {
"dev-server": "encore dev-server",
"dev": "encore dev",
"watch": "encore dev --watch",
"build": "encore production --progress"
}
}In your blade components, use the @encoreStyles and @encoreScripts directives to include the assets generated by Encore.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel</title>
<!-- Include assets -->
@encoreStyles
@encoreScripts
</head>
<body>
Hello.
</body>
</html>By default, it will look for the app entries, but you can change them by passing an entry name in each directive.
@encoreStyles('app')
@encoreScripts('admin')If you used static assets, 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.
The MIT License (MIT). Please see License File for more information.