C语言学习网

webpack-encore怎么在 Laravel 项目中使用

发表于:2022-10-04 作者:安全数据网编辑
编辑最后更新 2022年10月04日,今天就跟大家聊聊有关 webpack-encore怎么在 Laravel 项目中使用,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。安装依赖首先

今天就跟大家聊聊有关 webpack-encore怎么在 Laravel 项目中使用,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。

安装依赖

首先当然是安装依赖

yarn add -D @symfony/webpack-encore

需要注意的是,webpack-encore 没有像 laravel-mix 那样在自己内部依赖 vue-tempplate-compiler 之类的包,所以如果自己项目里用动了这些,需要自己在项目里手动安装好。

配置 webpack

在项目根目录下新建一个 webpack.config.js 文件并在其中配置 webpack-encore 功能(实际上它最终也是一个标准的 webpack 配置文件),以最基本的玩法为例。

const Encore = require('@symfony/webpack-encore')Encore// directory where compiled assets will be stored .setOutputPath('public/js/') // public path used by the web server to access the output path .setPublicPath('/js') // only needed for CDN's or sub-directory deploy //.setManifestKeyPrefix('build/') /*  * ENTRY CONFIG  *  * Add 1 entry for each "page" of your app  * (including one that's included on every page - e.g. "app")  *  * Each entry will result in one JavaScript file (e.g. app.js)  * and one CSS file (e.g. app.css) if you JavaScript imports CSS.  */.addEntry('app', './resources/js/app.js')// will require an extra script tag for runtime.js// but, you probably want this, unless you're building a single-page app .enableSingleRuntimeChunk() .cleanupOutputBeforeBuild().enableSourceMaps(!Encore.isProduction())// enables hashed filenames (e.g. app.abc123.css) .enableVersioning(Encore.isProduction()) .enableVueLoader() .enableSassLoader(options => {  options.implementation = require('sass') })// fetch the config, then modify it!const config = Encore.getWebpackConfig()// export the final configmodule.exports = config

新增 php helper 函数

Laravel 自带了一个 mix() 函数用于引用 mix 编译的资源,与之类似,syfony 也有这样的函数,而且更为方便。为此你需要在 Laravel 项目中自行实现这两方法,下面是我参考 symfony 里相关源码改写的,可能逻辑上并不算完善,但以自己一个多月的使用情况来看,它们表现良好。

use Illuminate\Support\HtmlString;/** * @param string $entryName * @return HtmlString */function encore_entry_link_tags(string $entryName): HtmlString{  $entryPointsFile = public_path('js/entrypoints.json');  $jsonResult = json_decode(file_get_contents($entryPointsFile), true);  if (!array_key_exists('css', $jsonResult['entrypoints'][$entryName])) {    return null;  }  $tags = array_map(function ($item) {    return '';  }, $jsonResult['entrypoints'][$entryName]['css']);  return new HtmlString(implode('', $tags));}/** * @param string $entryName * @return HtmlString */function encore_entry_script_tags(string $entryName): HtmlString{  $entryPointsFile = public_path('js/entrypoints.json');  $jsonResult = json_decode(file_get_contents($entryPointsFile), true);  if (!array_key_exists('js', $jsonResult['entrypoints'][$entryName])) {    return null;  }  $tags = array_map(function ($item) {    return '';  }, $jsonResult['entrypoints'][$entryName]['js']);  return new HtmlString(implode('', $tags));}

使用 encore_entry_link_tagsencore_entry_script_tags 引用编译的前端资源

在模板里使用前面添加的 helper 函数引用资源,你会发现它比 Laravel 自带的 mix() 函数更方便,只需要一个函数,就可以自动引入 vendor.js 和 app.js 了。

            {{ config('app.name') }}    {{ encore_entry_link_tags('app') }}  
{{ encore_entry_script_tags('app') }}

修改 package.json 中的脚本(scripts)

因为 laravel 项目默认 package.json 中 develop 等相关的脚本都是使用 laravel-mix 的,为了方便日常开发,现在要对它们进行一些调整,改用 webpack-cocore。调整后大致如下,你也可以根据自己实际应用情况进行其它调整

"scripts": {  "dev": "npm run development",  "development": "cross-env NODE_ENV=development encore dev",  "watch": "npm run development -- --watch",  "watch-poll": "npm run watch -- --watch-poll",  "hot": "encore dev-server --port=9001 --hot",  "prod": "npm run production",  "production": "cross-env NODE_ENV=production encore production"},

运行脚本,愉快撸 BUG

做完前面的这些步骤之后,在终端执行 yarn run hot ,浏览器中输入项目绑定的域名(如 app.test),就可以体验方便高效的 HMR 开发了。

后记

使用 webpack-encore 已经快两个月了,这期间总体说来相当顺利,小坑虽然有,但没什么大坑。去 github 上提 issue,维护成员基本上都很友善耐心,几个小时就会有回复。这种态度也让我对它更加放心了,相信它会折腾得越来越好。虽然 webpack-encore 是作为 Symfony 默认集成工具来设计的,但这并不妨碍它在 Laravel 中发挥强大威力。

相比于 laravel-mi,encore 的 API 以及一些默认配置方面考虑得更为科学和全面,想要配置 vue-loader 或者 ts-loader 之类的,只需要调用相应的方法。另外还有点让我先惊讶的是,他们竟然对 watchOptions.ignored 的默认值也考虑到了,默认忽略 /node_modules/,降低 CPU 占用。当然,更为重要的是,mix4 里因为一些 bug 而无法使用的功能,在 encore 里却正常,如 dynamic import。

看完上述内容,你们对 webpack-encore怎么在 Laravel 项目中使用有进一步的了解吗?如果还想了解更多知识或者相关内容,请关注行业资讯频道,感谢大家的支持。

0