溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
今天就跟大家聊聊有關 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 config
module.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 '<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 函數引用資源，你會發現它比 Laravel 自帶的 mix() 函數更方便，只需要一個函數，就可以自動引入 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）
因為 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 項目中使用有進一步的了解嗎？如果還想了解更多知識或者相關內容，請關注億速云行業資訊頻道，感謝大家的支持。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
