您好,登錄后才能下訂單哦!
今天就跟大家聊聊有關(guān) webpack-encore怎么在 Laravel 項(xiàng)目中使用,可能很多人都不太了解,為了讓大家更加了解,小編給大家總結(jié)了以下內(nèi)容,希望大家根據(jù)這篇文章可以有所收獲。
安裝依賴
首先當(dāng)然是安裝依賴
yarn add -D @symfony/webpack-encore
需要注意的是,webpack-encore
沒(méi)有像 laravel-mix 那樣在自己內(nèi)部依賴 vue-tempplate-compiler
之類的包,所以如果自己項(xiàng)目里用動(dòng)了這些,需要自己在項(xiàng)目里手動(dòng)安裝好。
配置 webpack
在項(xiàng)目根目錄下新建一個(gè) webpack.config.js
文件并在其中配置 webpack-encore
功能(實(shí)際上它最終也是一個(gè)標(biāo)準(zhǔn)的 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 config module.exports = config
新增 php helper 函數(shù)
Laravel 自帶了一個(gè) mix() 函數(shù)用于引用 mix 編譯的資源,與之類似,syfony 也有這樣的函數(shù),而且更為方便。為此你需要在 Laravel 項(xiàng)目中自行實(shí)現(xiàn)這兩方法,下面是我參考 symfony 里相關(guān)源碼改寫(xiě)的,可能邏輯上并不算完善,但以自己一個(gè)多月的使用情況來(lái)看,它們表現(xiàn)良好。
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 '<link rel="stylesheet" href="'.$item.'" rel="external nofollow" />'; }, $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 '<script src="'.$item.'"></script>'; }, $jsonResult['entrypoints'][$entryName]['js']); return new HtmlString(implode('', $tags)); }
使用 encore_entry_link_tags
和 encore_entry_script_tags
引用編譯的前端資源
在模板里使用前面添加的 helper 函數(shù)引用資源,你會(huì)發(fā)現(xiàn)它比 Laravel 自帶的 mix() 函數(shù)更方便,只需要一個(gè)函數(shù),就可以自動(dòng)引入 vendor.js 和 app.js 了。
<!doctype html> <html lang="{{ app()->getLocale() }}"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- CSRF Token --> <meta name="csrf-token" content="{{ csrf_token() }}"> <title>{{ config('app.name') }}</title> <!-- app.css --> {{ encore_entry_link_tags('app') }} </head> <body> <div id="app"></div> {{ encore_entry_script_tags('app') }} </body> </html>
修改 package.json 中的腳本(scripts)
因?yàn)?laravel 項(xiàng)目默認(rèn) package.json
中 develop 等相關(guān)的腳本都是使用 laravel-mix 的,為了方便日常開(kāi)發(fā),現(xiàn)在要對(duì)它們進(jìn)行一些調(diào)整,改用 webpack-cocore
。調(diào)整后大致如下,你也可以根據(jù)自己實(shí)際應(yīng)用情況進(jìn)行其它調(diào)整
"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" },
運(yùn)行腳本,愉快擼 BUG
做完前面的這些步驟之后,在終端執(zhí)行 yarn run hot ,瀏覽器中輸入項(xiàng)目綁定的域名(如 app.test),就可以體驗(yàn)方便高效的 HMR 開(kāi)發(fā)了。
后記
使用 webpack-encore
已經(jīng)快兩個(gè)月了,這期間總體說(shuō)來(lái)相當(dāng)順利,小坑雖然有,但沒(méi)什么大坑。去 github 上提 issue,維護(hù)成員基本上都很友善耐心,幾個(gè)小時(shí)就會(huì)有回復(fù)。這種態(tài)度也讓我對(duì)它更加放心了,相信它會(huì)折騰得越來(lái)越好。雖然 webpack-encore 是作為 Symfony 默認(rèn)集成工具來(lái)設(shè)計(jì)的,但這并不妨礙它在 Laravel 中發(fā)揮強(qiáng)大威力。
相比于 laravel-mi
,encore 的 API 以及一些默認(rèn)配置方面考慮得更為科學(xué)和全面,想要配置 vue-loader 或者 ts-loader 之類的,只需要調(diào)用相應(yīng)的方法。另外還有點(diǎn)讓我先驚訝的是,他們竟然對(duì) watchOptions.ignored 的默認(rèn)值也考慮到了,默認(rèn)忽略 /node_modules/,降低 CPU 占用。當(dāng)然,更為重要的是,mix4 里因?yàn)橐恍?bug 而無(wú)法使用的功能,在 encore 里卻正常,如 dynamic import。
看完上述內(nèi)容,你們對(duì) webpack-encore怎么在 Laravel 項(xiàng)目中使用有進(jìn)一步的了解嗎?如果還想了解更多知識(shí)或者相關(guān)內(nèi)容,請(qǐng)關(guān)注億速云行業(yè)資訊頻道,感謝大家的支持。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。