README

Laravel Encore

此包帮助将 Webpack Encore 与 Laravel 集成。

注意：虽然此包应该可以工作，但我不打算修复潜在的问题或更新它，因为我不再使用它。如果您想获得更好的开发环境，请考虑使用 Laravel 团队的新 Vite 集成 ~~Laravel Vite~~。

安装

您可以通过 composer 安装此包

composer require innocenzi/laravel-encore

安装 Encore

移除 laravel-mix 并添加 @symfony/webpack-encore。

yarn remove laravel-mix
yarn add @symfony/webpack-encore --dev

移除您的 webpack.mix.js 并创建一个 webpack.config.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();

确保 resources/js/app.js 存在。理想情况下，它还应该导入您的 CSS，但如果不希望这样做，您可以在 Encore 配置中添加 addStyleEntry。

// resources/js/app.js
import '../css/app.css';

确保您将 public/build/（或您设置的任何输出路径）添加到您的 .gitignore。

最后，但同样重要的是，您应该将 package.json 中的脚本替换为以下内容

// package.json
{
  "scripts": {
    "dev-server": "encore dev-server",
    "dev": "encore dev",
    "watch": "encore dev --watch",
    "build": "encore production --progress"
  }
}

使用方法

在您的 blade 组件中，使用 @styles 和 @scripts 指令包含由 Encore 生成的资源。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Laravel</title>
    <!-- Include assets -->
    @styles
    @scripts
  </head>
  <body>
    Hello.
  </body>
</html>

默认情况下，它将查找 app 条目，但您可以通过在每个指令中传递一个条目名称来更改它们。

@styles('app')
@scripts('admin')

如果您使用了静态资源，您可以使用 Encore::asset('build/path/to/your/asset.png') 来包含它。在底层，它只是对 manifest.json 的映射。

许可证

MIT 许可证 (MIT)。有关更多信息，请参阅许可证文件。

innocenzi / laravel-encore

维护者

详细信息

README

Laravel Encore

安装

安装 Encore

使用方法

许可证