使用进阶：通过 Laravel Mix 编译前端资源 | 前端开发 | Laravel 5.8 中文文档
Laravel 学院
文档
Laravel 8.x 中文文档
Laravel 7.x 中文文档
Laravel 6.x 中文文档
Laravel 5.8 中文文档
Laravel 5.7 中文文档
Laravel 5.6 中文文档
Laravel 5.5 中文文档
Laravel 5.4 中文文档
Laravel 5.3 中文文档
Laravel 5.2 中文文档
Laravel 5.1 中文文档
Lumen 中文文档
全栈教程
PHP 全栈工程师指南
PHP 入门到实战
Laravel 入门到精通
Vue.js 入门到实战
玩转 PhpStorm 教程
Laravel 博客入门项目
Laravel 微信小程序项目
Laravel 前后端分离项目
Swoole 入门到实战
Eloquent 性能优化实战
Redis 高性能实战系列
Laravel 新版本特性
PHP 新特性与最佳实践
Golang
Go 入门教程
Go Web 编程
Gin 使用教程
微服务开发
内功修炼
数据结构与算法
网络协议
微服务从入门到实践
高性能 MySQL 实战
高性能 Redis 实战
Laravel 消息队列实战
Laravel 从学徒到工匠
PHP 设计模式系列
名企面试指南
资源库
Laravel 资源大全
Laravel 开源项目
Laravel 扩展包
Laravel 资源下载
更多
博客 & 新闻
问答 & 讨论
Leetcode 题解
学院君读书笔记系列
关于 Laravel 学院
Laravel 互助学习群
Golang 互助学习群
更多
Laravel 中文文档
Laravel 全栈教程
Laravel 学习路径
Go 入门教程
程序员内功修炼
博客
问答
搜索
注册
登录
Info
Content
章节导航
Laravel 5.8 中文文档
目录索引
序言
3篇文章
新版特性
升级指南
贡献指南
快速入门
5篇文章
安装配置
目录结构
重量级开发环境：Homestead
轻量级开发环境：Valet
部署应用到生产环境
核心架构
5篇文章
一次 Laravel 请求的生命周期
服务容器
服务提供者
门面（Facades）
契约（Contracts）
基础组件
12篇文章
路由
中间件
CSRF 保护
控制器
HTTP 请求
HTTP 响应
视图
URL 生成
Session
表单验证
异常处理
日志
前端开发
4篇文章
Blade 模板引擎
本地化
快速入门：JavaScript & CSS 脚手架
使用进阶：通过 Laravel Mix 编译前端资源
安全系列
8篇文章
登录认证
API 认证解决方案：Laravel Passport
API 认证
授权
邮箱验证
加密
哈希
重置密码
进阶系列
12篇文章
Artisan 控制台
广播
缓存
集合
事件
文件存储
辅助函数
邮件
通知
扩展包开发
队列
任务调度
数据库操作
6篇文章
快速入门
查询构建器
分页
迁移
数据填充
Redis
Eloquent模型
6篇文章
快速入门
关联关系
集合
访问器和修改器
API 资源类
序列化
测试系列
6篇文章
快速入门
HTTP 测试
浏览器测试
控制台测试
数据库测试
模拟
官方扩展包
7篇文章
订阅支付解决方案：Laravel Cashier（Stripe）
订阅支付解决方案：Laravel Cashier（Braintree）
远程操作解决方案：Laravel Envoy
队列系统解决方案：Laravel Horizon
全文搜索解决方案：Laravel Scout
第三方登录解决方案：Laravel Socialite
本地开发调试解决方案：Laravel Telescope
图书
Laravel 5.8 中文文档
前端开发
使用进阶：通过 Laravel Mix 编译前端资源
使用进阶：通过 Laravel Mix 编译前端资源
由 学院君 创建于3年前, 最后更新于 3年前
版本号 #1
14897 views
2 likes
0 collects
简介
Laravel Mix 提供了一套流式 API，使用一些通用的 CSS 和 JavaScript 预处理器为 Laravel 应用定义 Webpack 构建步骤。通过简单的方法链，你可以流式定义资源管道。例如：
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');
如果你对如何开始使用 Webpack 和前端资源编译感到困扰，那么你会爱上 Laravel Mix。不过，并不是强制要求在开发期间使用它。你可以自由选择使用任何前端资源管道工具，或者压根不使用。
安装 & 设置
安装 Node
在开始接触 Mix 之前，必须首先确保 Node.js 和 NPM 在机器上已经安装：
node -v
npm -v
默认情况下，Laravel Homestead 已经包含了你所需要的一切；不过，如果你没有使用 Homestead，你也可以从Node 的下载页面轻松的下载安装最新版本的 Node 和 NPM。
Laravel Mix
接下来，需要安装 Laravel Mix，在新安装的 Laravel 根目录下，你会发现有一个 package.json 文件。该文件包含你所需要的一切，和 composer.json 类似，只不过是用来定义 Node 依赖而非 PHP 依赖，你可以通过运行如下命令来安装需要的依赖：
npm install
如果你正在 Windows 系统上开发，需要在运行 npm install 命令时带上 --no-bin-links：
npm install --no-bin-links
运行 Mix
Mix 是位于 Webpack 顶层的配置层，所以要运行 Mix 任务你只需要在运行包含在默认 package.json 文件中的其中某个 NPM 脚本即可：
// 运行所有 Mix 任务...
npm run dev
// 运行所有 Mix 任务并减少输出...
npm run production
监控前端资源改变
npm run watch 命令将会持续在终端运行并监听所有相关文件的修改，Webpack将会在发现修改后自动重新编译资源文件：
npm run watch
你可能会发现文件变更的时候特定环境的 Webpack 不会更新，如果你遇到了这样的问题，可以考虑使用 watch-poll 命令：
npm run watch-poll
处理样式表
webpack.mix.js 是所有资源编译的入口，可以将其看作 Webpack 的轻量级配置封装层。Mix 任务可以以方法链的方式被链在一起来定义前端资源如何被编译。
Less
要将 Less 编译成 CSS，可以使用 less 方法。下面让我们来编译 app.less 文件到 public/css/app.css：
mix.less('resources/less/app.less', 'public/css');
多次调用 less 方法可用于编译多个文件：
mix.less('resources/less/app.less', 'public/css')
.less('resources/less/admin.less', 'public/css');
如果你想要自定义编译后文件的输出位置，可以将完整的路径信息作为第二个参数传递到 less 方法：
mix.less('resources/less/app.less', 'public/stylesheets/styles.css');
如果你需要覆盖底层 Less 插件选项，可以传递一个对象作为 mix.less() 的第三个参数：
mix.less('resources/less/app.less', 'public/css', {
strictMath: true
});
Sass
sass 方法允许你将 Sass 编译成 CSS。你可以像这样使用该方法：
mix.sass('resources/sass/app.scss', 'public/css');
同样，和 less 方法一样，你可以将多个 Sass 文件编译成单个 CSS 文件，甚至自定义结果 CSS 的输出路径：
mix.sass('resources/sass/app.sass', 'public/css')
.sass('resources/sass/admin.sass', 'public/css/admin');
额外的 Node-Sass 插件选项可以以第三个参数的形式提供：
mix.sass('resources/sass/app.sass', 'public/css', {
precision: 5
});
Stylus
和 Less 和 Sass 类似，stylus 方法允许你将 Stylus 编译成 CSS：
mix.stylus('resources/stylus/app.styl', 'public/css');
你还可以安装额外的 Stylus 插件，例如 Rupture，首先，通过 NPM 安装这个插件（npm install rupture）然后在调用 mix.stylus() 时引入它：
mix.stylus('resources/stylus/app.styl', 'public/css', {
use: [
require('rupture')()
});
PostCSS
PostCSS，是一个转化 CSS 的强大工具，在 Laravel Mix 中开箱可用。默认情况下，Mix 使用了流行的 Autoprefixer 插件来自动添加所需要的 CSS3 浏览器引擎前缀。不过，你也可以添加与应用适配的其他额外插件。首先，通过 NPM 安装需要的插件，然后在 webpack.mix.js 文件中引用：
mix.sass('resources/sass/app.scss', 'public/css')
.options({
postCss: [
require('postcss-css-variables')()
});
原生 CSS
如果你只想要将多个原生 CSS 样式文件合并到一个文件，可以使用 styles 方法：
mix.styles([
'public/css/vendor/normalize.css',
'public/css/vendor/videojs.css'
], 'public/css/all.css');
URL 处理
因为 Laravel Mix 是基于 Webpack 开发的，所以了解一点关于 Webpack 的概念很重要。对 CSS 编译而言，Webpack 会在样式表中重写并优化所有 url() 调用，虽然这可能最初听上去很奇怪，但这确实个不折不扣的强大功能。假设我们想要编译包含图片相对 URL 的 Sass：
.example {
background: url('../images/example.png');
注：任意给定 url() 的绝对路径都会从 URL 重写中排除，例如，url('/images/thing.png') 或 url('http://example.com/images/thing.png') 将不会被修改。
默认情况下，Laravel Mix 和 Webpack 会找到 example.png，将其拷贝到 public/images 目录下，然后在生成的样式表中重写 url()，因此，编译后的 CSS 如下所示：
.example {
background: url(/images/example.png?d41d8cd98f00b204e9800998ecf8427e);
和这个功能一样有用的是，可能已存在的目录结构已经配置成你想要的方式，这种情况下，你可以禁用 url() 重写：
mix.sass('resources/app/app.scss', 'public/css')
.options({
processCssUrls: false
});
如果添加了这项配置到 webpack.mix.js 文件，Mix 将不再匹配 url() 或拷贝资源到 public 目录。换句话说，编译过的 CSS 和编译前输入的一样：
.example {
background: url("../images/thing.png");
Source Map
虽然 Source Map 默认被禁用，但是可以通过在 webpack.mix.js 文件中调用 mix.sourceMaps() 来激活。尽管这会带来编译/性能开销，不过在编译资源的时候可以提供额外的调试信息给浏览器的开发者工具：
mix.js('resources/js/app.js', 'public/js')
.sourceMaps();
处理 JavaScript
Mix 还提供了多个特性帮助你处理 JavaScript 文件，例如编译 ECMAScript 2015，模块捆绑，最小化以及合并原生 JavaScript 文件。更妙的是，这些都是无缝集成的，不需要额外的自定义配置：
mix.js('resources/js/app.js', 'public/js');
通过这一行代码，你可以使用如下功能：
ES2015 语法
模块
编译 .vue 文件
最小化生产环境
提取 Vendor 库
捆绑所有应用特定 JavaScript 和 vendor 库的一个潜在缺点是进行长期缓存将变得更加困难，例如，单次更新应用代码将会强制浏览器下载所有 vendor 库，即使它们并没有更新。
如果你想要频繁更新应用的 JavaScript，需要考虑对 vendor 库进行提取和拆分，这样的话，对应用代码的一个修改不会影响 vendor.js 文件的缓存。Mix 的 extract 方法可以实现这样的功能：
mix.js('resources/js/app.js', 'public/js')
.extract(['vue'])
extract 方法接收包含所有库的数组或你想要提取到 vendor.js 文件的模块，使用上述代码作为示例，Mix将会生成如下文件：
public/js/manifest.js：Webpack manifest runtime
public/js/vendor.js：vendor 库
public/js/app.js：应用代码
要避免 JavaScript 错误，确保以正确顺序加载这些文件：
<script src="/js/manifest.js"></script>
<script src="/js/vendor.js"></script>
<script src="/js/app.js"></script>
React
Mix 可以自动为安装 Babel 插件以便支持 React，我们可以将 mix.js() 调用替换为 mix.react() 来实现：
mix.react('resources/js/app.jsx', 'public/js');
在这个场景背后，Mix 会下载并引入合适的 Babel 插件 babel-preset-react。
Vanilla JS
和使用 mix.styles() 合并样式表类似，你可以通过 scripts() 方法合并并最小化任意数量的 JavaScript 文件：
mix.scripts([
'public/js/admin.js',
'public/js/dashboard.js'
], 'public/js/all.js');
这一功能对那些不需要 Webpack 对 Javascript 进行编译的传统应用来说很有用。
注：mix.scripts() 的一个轻微调整是 mix.babel()，它的方法签名和 scripts 一样，不同之处是合并的文件会经过 Babel 编译，从而将所有 ES2015 代码转化成所有浏览器都支持的原生 JavaScript。
自定义 Webpack 配置
在场景背后，Laravel Mix 引用了预配置的 webpack.config.js 文件来尽可能快的启动和运行。个别情况下，你需要手动编辑这个文件。你可能有一个被引用的特定的加载器或插件，或者可能倾向于使用 Stylus 而不是 Sass，在这些情况下，你有两个选择：
合并自定义配置
Mix 提供了一个有用的 webpackConfig 方法，从而允许你合并任意简短的 Webpack 配置覆盖。这是一个很吸引人的选择，因为不需要你拷贝或维护自己的webpack.config.js 文件副本，webpackConfig 方法接收一个对象，该对象包含了任意你想要应用的Webpack指定配置：
mix.webpackConfig({
resolve: {
modules: [
path.resolve(__dirname, 'vendor/laravel/spark/resources/assets/js')
});
自定义配置文件
第二个选择是拷贝 Mix 的 webpack.config.js 到自己的项目根目录：
cp node_modules/laravel-mix/setup/webpack.config.js ./
接下来，将 package.json 文件中的所有 --config 引用指向拷贝后的新配置文件。如果你选择使用这种自定义方式，以后只要 Mix 的 webpack.config.js 有升级变更都要手动将变更合并到自定义的新文件。
拷贝文件/目录
你可以使用 copy 方法拷贝文件/目录到新路径，这在将 node_modules 目录下的特定资源文件重新放置到 public 目录下时很有用：
mix.copy('node_modules/foo/bar.css', 'public/css/bar.css');
拷贝目录的时候，copy 方法将会铺平目录结构，要维持目录的原始结构，需要使用 copyDirectory 方法：
mix.copyDirectory('resources/img', 'public/img');
版本号/缓存刷新
很多开发者会给编译的前端资源添加时间戳或者唯一令牌后缀以强制浏览器加载最新版本而不是代码的缓存副本。Mix 可以使用 version 方法为你处理这种场景。
version 方法会自动附加唯一哈希到已编译文件名，从而方便实现缓存刷新：
mix.js('resources/js/app.js', 'public/js')
.version();
生成版本文件后，还不知道提取的文件名，所以，你需要在视图中使用 Laravel 全局的 mix 函数来加载相应的带哈希值的前端资源。mix 函数会自动判当前的已哈希文件名：
<script src="{{ mix('/js/app.js') }}"></script>
由于版本文件在本地开发中没有什么用，你可以只在运行 npm run production 期间进行版本处理操作：
mix.js('resources/js/app.js', 'public/js');
if (mix.config.inProduction) {
mix.version();
BrowserSync 重新加载
BrowserSync 会自动监控文件修改，并将修改注入浏览器而不需要手动刷新，你可以通过调用 mix.browserSync() 方法启用该支持：
mix.browserSync('my-domain.test');
// Or...
// https://browsersync.io/docs/options
mix.browserSync({
proxy: 'my-domain.test'
});
你可以传递一个字符串（代理）或对象（BrowserSync 设置）到该方法。接下来，使用 npm run watch 命令来启动 Webpack 的开发服务器，现在，当你编辑一个 JavaScript 脚本或 PHP 文件时，会看到浏览器会立即刷新以响应你的修改。
环境变量
你可以通过在 .env 文文件添加 MIX_ 前缀将环境变量注入 Mix：
MIX_SENTRY_DSN_PUBLIC=http://example.com
在 .env 文件中定义好变量之后，可以通过 process.env 对象进行访问（如果在运行 watch 任务期间变量值有变动，需要重启任务）：
process.env.MIX_SENTRY_DSN_PUBLIC
通知
在有效的情况下，Mix 会自动为每个捆绑显示操作系统通知，这可以给你一个及时的反馈：编译成功还是失败。不过，某些场景下你可能希望禁止这些通知，一个典型的例子就是在生产境服务器触发 Mix。通知可以通过 disableNotifications 方法被停用：
mix.disableNotifications();
Vue
Node
版本号
合并
BrowserSync
Stylus
PostCSS
React
Webpack
Laravel
Sass
Less
Mix
前端资源
编译
前端
文档
5.8
点赞
取消点赞
收藏
取消收藏
赞赏
分享到以下平台：
<< 上一篇:
快速入门：JavaScript & CSS 脚手架
>> 下一篇:
登录认证
12 条评论
#11
svvvpwang
评论于 3年前
回复 #1
正在删除评论...
缺少 cross-env 先安装好cross-env 再重新进行命令 从 npm install 开始
安装全局cross-env
npm install -g cross-env --no-bin-links
#12
樱花树下
评论于 3年前
回复 #11
正在删除评论...
好的，谢谢
&lsaquo;
&rsaquo;
登录后即可添加评论
升级为学院君订阅用户(新年优惠🎁)
内容导航
简介
安装 & 设置
运行 Mix
处理样式表
Less
Sass
Stylus
PostCSS
原生 CSS
URL 处理
Source Map
处理 JavaScript
提取 Vendor 库
React
Vanilla JS
自定义 Webpack 配置
拷贝文件/目录
版本号/缓存刷新
BrowserSync 重新加载
环境变量
通知
相关推荐
使用进阶：通过 Laravel Mix 编译前端资源
Laravel 5.6 中文文档
前端开发
使用进阶：通过 Laravel Mix 编译前端资源
Laravel 5.7 中文文档
前端开发
使用进阶：通过 Laravel Mix 编译前端资源
Laravel 6 中文文档
前端开发
使用 Mix 编译前端资源
Laravel 7 中文文档
前端开发
通过 Mix 编译前端资源
Laravel 8 中文文档
进阶系列
回到顶部
2022 基于 Laravel 6 构建
关于学院
订阅服务
友情链接
站点地图
本站 CDN 加速服务由又拍云赞助