如何在非拉维尔项目中使用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

   ：

   npm install laravel-mix cross-env node-sass --save-dev

   在您的项目的根目录中，创建
>以下：>
3. >

   webpack.mix.js webpack.mix.js update

   ：

   const mix = require('laravel-mix');
   
   mix.js('resources/js/app.js', 'public/js')
      .sass('resources/sass/app.scss', 'public/css');

   >将以下脚本添加到您的
>文件：>

4. package.json创建资产文件：package.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"
   },

   和
文件。 添加一些示例内容（例如，
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中创建一个文件：

npm install laravel-mix cross-env node-sass --save-dev

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

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

：

const mix = require('laravel-mix');

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

npm run hot运行：

这启动了带有热重加载的开发服务器。

生产构建：

npm run production用于部署，使用

来生成优化的，缩小的资产。

结论： Laravel Mix提供了一种用户友好的方法来管理非律师项目中的资产汇编，简化开发过程并减少与直接配置WebPack相关的开销。 可选的热装加载和缓存破坏功能进一步增强了开发人员的体验。请记住将

添加到您的

>文件中。node_modules>

以上是如何在非拉维尔项目中使用Laravel Mix的详细内容。更多信息请关注PHP中文网其他相关文章！