Laravel mix 基于 webpack, 前端建构工具. 核心是通过一系列简单的 api 和约定好的应用程序结构, 来简化最常见的 webpack 建构和编译任务.

Mix 的配置文件是根目录下的 webpack.mix.js , 你必须设置的配置比 Webpack 的简单多了, 也就是说你只需要做很少的工作, 就可以完成常见的资产编译任务.

看个例子: sass 编译成 css

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

就这么简单, Mix 还包含 文件监视, 浏览器同步, 通知, 指定文件结构, 自动前缀, URL处理等等.

  • 约定目录
    每个新 Laravel 项目都有一个 resources 文件夹, 这是 Mix 默认的约定前端资源存放的位置.

  • 安装

    1. 基于 node 环境, 请检查

      node -v
npm -v

    2. 安装

      npm install

package.json 文件定义了 node 的依赖关系. 类比 php 的 composer.json.

文档很详细

文档地址

中文翻译文档 7.*

热模块替换 (Hot Module Replacement)

当您使用Vue或React编写单个组件时, 您可能习惯于每次重新编译组件,然后刷新页面, 或者, 如果您使用类似Mix的工具, 依靠 浏览器同步(Browser sync) 为您重新加载组件.

这很好, 但是如果你做的是单页面应用时, 刷新页面意味着, 之前的状态都会丢失.

HMR (Hot Module Replacement) 可以解决这类问题. HMR 配置起来并不容易, 但 Mix 已经帮你完成这些复杂工作, 现在可以开箱即用. 3q.

原理 就像浏览器同步一样, 不同的是, 不是加载所有编译的代码, 仅仅加载变更的代码, 将其注入到浏览器中, 并且保留你已经建立的状态, 使你的单网页应用到达之前测试位置.

使用 运行 npm run hot , 并且确保所有 <script> 都引用了正确的 js 文件版本. 本质上, Mix 在 localhost:8080 启动一个小型节点服务器, 因此, 如果您<script>标签指向脚本的不同版本, HMR 将不起作用. 使用 mix() 帮助方法是一个很好的选择.