🎜{tip} mix.babel()은 mix.scripts()의 작은 변형입니다. 메소드 서명은 scripts와 정확히 동일하지만 통합 파일은 ES2015 코드를 브라우저가 이해할 수 있는 바닐라 JavaScript로 변환하는 Babel에 의해 컴파일됩니다. 🎜🎜🎜🎜🎜🎜🎜🎜

사용자 정의 Webpack 구성

Lavarel Mix는 시작 및 작동 속도를 높이기 위해 백그라운드에서 사전 구성된 webpack.config.js 파일을 참조합니다. 경우에 따라 이 파일을 수동으로 편집해야 할 수도 있습니다. 참조해야 할 특별한 로더나 플러그인이 있을 수도 있고, Sass 대신 Stylus를 사용하는 것을 선호할 수도 있습니다. 이 경우 두 가지 옵션이 있습니다. webpack.config.js 文件以加速启动和运行。有时，你可能需要手动编辑这个文件。你可能有一个特殊的加载器或插件需要引用，或者可能更愿意用 Stylus 代替 Sass。这种情况下，你有两个选择：

合并自定义配置

Mix 提供了 webpackConfig 方法来合并任意简短的 Webpack 配置以覆盖已有配置。这是个非常勾人的选择，因为它不要求你复制和维护你自己的 webpack.config.js 副本。 webpackConfig 方法接受一个对象作为作参数，它包含你想要应用的任何 Webpack 特定配置 ，

rrreee

自定义配置文件

如果你想完全自定义 Webpack 配置，将 node_modules/laravel-mix/setup/webpack.config.js 文件复制到项目的根目录。然后将 package.json 文件中所有的 --config 引用都指向新复制的配置文件。如果选择用这种方式自定义配置，Mix webpack.config.js 后续的任何更新，都必须手动合并到你的自定义配置文件中。

复制文件 & 目录

copy 方法可以用于将文件和目录复制到新位置。当 node_modules 目录中特殊的资源需要重新定位到 public 文件夹时，这个方法很有用。

rrreee

复制文件夹时， copy 方法将扁平化目录结构。想要保持目录的原始结构，需要使用 copyDirectory 方法：

rrreee

版本管理 / 缓存销毁

许多开发者在他们编译后的资源添加时间戳或唯一令牌作后缀，强制浏览器加载新的资源，以替换旧的代码副本。Mix 可以使用 version 方法替你处理它们。.

version 方法自动在所有编译后的文件名后追加唯一的哈希值，从而实现更方便的缓存销毁：

rrreee

在生成版本化文件后，你不会知道确切的文件名。因此，你需要在  views 中使用 Laravel 的全局  mix 函数载入相应的哈希资源。 mix 函数自动判断哈希文件的当前文件名：

rrreee

通常在开发阶段不需要版本化文件，你可以仅在运行 npm run production

사용자 정의 구성 병합

Mix는 webpackConfig 병합 방법을 제공합니다. 기존 구성을 덮어쓰는 짧은 Webpack 구성입니다. 이는 webpack.config.js의 복사본을 복사하고 유지 관리할 필요가 없기 때문에 매우 매력적인 옵션입니다. webpackConfig 메소드는 Webpack 특정 구성 , rrreee을 포함하는 객체를 인수로 받아들입니다. name="95cfe8" data-unique="95cfe8">

사용자 정의 구성 파일

Webpack 구성을 완전히 사용자 정의하려면 node_modules/laravel-mix/setup/webpack을 추가하세요. .config.js 파일을 프로젝트의 루트 디렉터리에 복사하세요. 그런 다음 package.json 파일의 모든 --config 참조가 새로 복사된 구성 파일을 가리키도록 합니다. 이 방식으로 구성을 사용자 정의하기로 선택한 경우 Mix webpack.config.js에 대한 모든 후속 업데이트를 수동으로 사용자 정의 구성 파일에 병합해야 합니다.

🎜🎜🎜

🎜

파일 및 디렉터리 복사 중

🎜copy 메소드를 사용하여 파일과 디렉터리를 새 위치로 복사할 수 있습니다. 이 방법은 node_modules 디렉터리의 특수 리소스를 public 폴더로 재배치해야 할 때 유용합니다. 🎜rrreee🎜폴더를 복사할 때 copy 메소드는 디렉토리 구조를 평면화합니다. 디렉터리의 원래 구조를 유지하려면 copyDirectory 메서드를 사용해야 합니다: 🎜rrreee🎜🎜🎜

🎜

버전 관리/캐시 파기

🎜많은 개발자가 컴파일된 리소스에 타임스탬프나 고유 토큰을 접미사로 추가하여 브라우저가 이전 코드 복사본을 대체하기 위해 새 리소스를 로드하도록 합니다. Mix는 version 메소드를 사용하여 이를 처리할 수 있습니다. .🎜🎜version 메서드는 컴파일된 모든 파일 이름에 고유한 해시 값을 자동으로 추가하므로 보다 편리한 캐시 삭제가 가능합니다. 🎜rrreee🎜버전이 지정된 파일을 생성한 후에는 정확한 파일 이름을 알 수 없습니다. . 따라서 해당 해시 리소스를 로드하려면 뷰에서 Laravel의 전역 mix 함수를 사용해야 합니다. mix 함수는 해시 파일의 현재 파일 이름을 자동으로 결정합니다: 🎜rrreee🎜 일반적으로 개발 단계에서는 버전이 지정된 파일이 필요하지 않으며 npm run을 실행할 때만 버전을 실행할 수 있습니다. 생산 화학적 처리: 🎜rrreee🎜🎜🎜🎜🎜🎜

Browsersync Reload

BrowserSync는 파일 변경 사항을 자동으로 감지하고 수동 새로 고침 없이 브라우저에 변경 사항을 삽입할 수 있습니다. mix.browserSync() 메서드를 호출하여 이 지원을 활성화할 수 있습니다. mix.browserSync() 方法开启此项支持：

rrreee

可以传递字符串（代理）或对象 Y（BrowserSync 设置）给此方法。然后使用 npm run watch 命令启动 Webpack 的开发服务器。再编辑脚本或者 PHP 文件，就会看到浏览器立即刷新以响应你的修改。

环境变量

可以通过在 .env 文件中添加 MIX_ 前缀，将环境变量注入到 Mix：

rrreee

一旦此变量被定义在 .env 文件中，就可以借助  process.env 对象访问它。如果在运行 watch 任务时这个值发生改，就需要重启任务：

rrreee

通知

如果可用，Mix 将自动为每次绑定显示操作系统通知。这将为你提供编译是否成功的实时反馈。不过，可能在某些情况下，你希望禁用通知。一个例子是在生产服务器上触发 Mix。通知可以借助 disableNotificationsrrreee

문자열(프록시) 또는 개체 Y(BrowserSync 설정)를 이 메서드에 전달할 수 있습니다. 그런 다음 npm run watch 명령을 사용하여 Webpack 개발 서버를 시작하세요. 스크립트나 PHP 파일을 다시 편집하면 수정 사항에 따라 브라우저가 즉시 새로 고쳐지는 것을 볼 수 있습니다.

🎜환경 변수🎜🎜를 .env 파일에 추가할 수 있습니다. Mix에 환경 변수를 삽입하기 위한 MIX_ 접두사: 🎜rrreee🎜이 변수가 .env 파일에 정의되면 process.env를 사용할 수 있습니다. 객체가 이에 액세스합니다. watch 작업을 실행할 때 이 값이 변경되면 작업을 다시 시작해야 합니다: 🎜rrreee🎜🎜🎜

🎜🎜알림🎜🎜가능한 경우 Mix는 각 바인딩에 대한 운영 체제 알림을 자동으로 표시합니다. 그러면 컴파일이 성공했는지 여부에 대한 실시간 피드백이 제공됩니다. 그러나 알림을 비활성화하려는 상황이 있을 수 있습니다. 예를 들어 프로덕션 서버에서 Mix를 트리거하는 경우가 있습니다. disableNotifications 메소드를 사용하여 알림을 구성할 수 있습니다. 🎜rrreee🎜이 글은 🎜LearnKu.com🎜 웹사이트에 처음 게시되었습니다. 🎜🎜

← 프런트엔드 가이드