如何在非拉維爾項目中使用Laravel Mix

>本教程演示瞭如何利用簡化的Webpack API包裝器Laravel Mix在Laravel框架之外的項目中進行資產彙編。 這種方法通過消除了對廣泛的WebPack配置的需求，可以顯著加速項目設置。

鍵優點：

• 簡化的資產彙編： laravel Mix簡化了WebPack的複雜性，使資產處理（JavaScript，CSS等）變得容易得多。 >
• 快速項目設置：花費更少的時間來配置構建工具，而更多的時間構建應用程序。 > 不需要
• webpack配置：文件的需求。 > webpack.config.js

>先決條件：

> node.js和npm：
• >運行laravel混合物必不可少的。用>和。 node -v驗證安裝 npm -v
php和Composer（可選）：> 基本的JSON和終端熟悉度：對基本命令行操作的理解很有幫助。
• >
安裝和設置：

項目初始化：

創建一個新的項目目錄。

1. >安裝依賴項：

   使用npm安裝laravel混合，
（用於跨平台環境變量）和
2. >（用於SASS彙編）：>

   cross-env>node-sasscreate

   ：

   <code class="language-bash">npm install laravel-mix cross-env node-sass --save-dev</code>

   在您的項目的根目錄中，創建
>以下：>
3. >

   webpack.mix.js webpack.mix.js update

   ：

   <code class="language-javascript">const mix = require('laravel-mix');
   
   mix.js('resources/js/app.js', 'public/js')
      .sass('resources/sass/app.scss', 'public/css');</code>

   >將以下腳本添加到您的
>文件：>

4. package.json創建資產文件：package.json按照

   指定的創建

   <code class="language-json">"scripts": {
     "dev": "cross-env NODE_ENV=development webpack --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
     "watch": "cross-env NODE_ENV=development webpack --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
     "hot": "cross-env NODE_ENV=development webpack-dev-server --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
     "production": "cross-env NODE_ENV=production webpack --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
   },</code>

   和
文件。 添加一些示例內容（例如，
5. 中的CSS樣式）。

   > resources/js/app.jsresources/sass/app.scss>運行Laravel Mix：執行webpack.mix.js來編譯您的資產。 輸出將在app.scss>和

   >目錄中。
>

6. >熱重新加載和緩存破壞（可選）： npm run dev public/js用於增強開發工作流程，啟用熱加載和緩存破壞： public/css

創建

：在您的項目root中創建一個文件：

<code class="language-bash">npm install laravel-mix cross-env node-sass --save-dev</code>

update composer.json： "files": ["mix.php"] "autoload" composer.json的部分。 運行composer dump-autoload。

修改webpack.mix.js：>添加.version()和.browserSync()webpack.mix.js混合鏈：

：

<code class="language-javascript">const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css');</code>

npm run hot運行：

這啟動了帶有熱重加載的開發服務器。

生產構建：

npm run production用於部署，使用

來生成優化的，縮小的資產。

結論： Laravel Mix提供了一種用戶友好的方法來管理非律師項目中的資產彙編，簡化開發過程並減少與直接配置WebPack相關的開銷。 可選的熱裝加載和緩存破壞功能進一步增強了開發人員的體驗。請記住將

添加到您的

>文件中。 node_modules>

以上是如何在非拉維爾項目中使用Laravel Mix的詳細內容。更多資訊請關注PHP中文網其他相關文章！