Laravel Mix 初探 - 腾讯云开发者社区-腾讯云知识图谱

Laravel Mix 初探 - 腾讯云开发者社区-腾讯云

本站和网页 https://cloud.tencent.com/developer/article/1360299 的作者无关，不对其内容负责。快照谨为网络故障时之索引，不代表被搜索网站的即时页面。

Laravel Mix 初探 - 腾讯云开发者社区-腾讯云腾讯云备案控制台开发者社区学习实践活动专区工具TVP文章/答案/技术大牛搜索搜索关闭写文章提问登录/注册志航腾讯 · 应用开发 (已认证)《技思广益 · 腾讯技术人原创集》作者9 篇文章Laravel Mix 初探转到我的清单专栏首页前端探索Laravel Mix 初探60分享分享文章到朋友圈分享文章到 QQ分享文章到微博复制文章链接到剪贴板海报分享海报分享原创Laravel Mix 初探修改于2018-11-02 10:00:08阅读 1.8K0简介针对 Laravel 优化了的 Laravel Mix, 提供了高效优雅的 API，用于使用几个常见的 CSS 和 JavaScript 预处理器为应用定义 Webpack 构建步骤，基本可以使到 80% 的webpack用例都变得简单明了。Laravel 上面的安装Laravel 5.4 以上默认已经安装了 Laravel Mix，在开发机配置了node 和 npm的基础上，仅仅只需要运行下面的命令即可安装：npm install复制如果你是在window开发机上面进行开发，那么，你可能还需要在运行上面命令的时候带上--no-bin-linksnpm install --no-bin-links复制什么时候该使用 --no-bin-links?配置 Laravel Mix现在在根目录下就应该可以看到一个webpack.mix.js文件，他是 Laravel Mix 的配置文件，和我们平时看到的 webpack.config.js 长得不太一样，大部分的时间我们都放在配置这个文件上面。 let mix = require('laravel-mix');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are compiling the Sass
| file for your application, as well as bundling up your JS files.
*/
mix.js('src/app.js', 'dist/')
.sass('src/app.scss', 'dist/');复制上面三行代码，就是预先配置好的 mix，它目前可以做的事情就是编译 src/app.js 到 dist/, src/app.scss 到 dist/, 看起来非常简洁优雅。Laravel Mix 还有更多配置：// 完整的API复制// mix.js(src, output);复制// mix.react(src, output); <-- 常用！和上面 mix.js() 一样, 但是注册的是 React Babel　编译。复制// mix.extract(vendorLibs);　 <-- 提取依赖库复制// mix.sass(src, output);复制// mix.standaloneSass('src', output); <-- 更快，但是和 webpack 无关复制// mix.fastSass('src', output); <--　mix.standaloneSass()的别名.复制// mix.less(src, output);复制// mix.stylus(src, output);复制// mix.postCss(src, output, [require('postcss-some-plugin')()]);复制// mix.browserSync('my-site.dev');　<-- 可以自动监控你的文件变化，并将更改注入浏览器，而无需手动刷新复制// mix.combine(files, destination);复制// mix.babel(files, destination); <-- 和 mix.combine() 一样, 但是包含了 Babel 编译.复制// mix.copy(from, to);复制// mix.copyDirectory(fromDir, toDir);复制// mix.minify(file);复制// mix.sourceMaps(); <-- 启用 sourcemaps复制// mix.version(); <-- 启用打版本号，需要在html中修改复制// mix.disableNotifications();复制// mix.setPublicPath('path/to/public');复制// mix.setResourceRoot('prefix/for/resource/locators');复制// mix.autoload({}); <-- 将传递给 Webpack 的 ProvidePlugin.复制// mix.webpackConfig({}); <-- 覆盖 webpack.config.js，而不需要直接编辑webpack.config.js。复制// mix.then(function () {}) <--每次Webpack完成构建时都会触发复制// mix.options({复制// extractVueStyles: false, <-- 将.vue组件样式提取到文件，而不是内联。复制// processCssUrls: true, <-- 理/优化相关样式表url（）。设置为false，如果你不想让他们触摸。复制// purifyCss: false, <-- 删除未使用的CSS选择器。复制// uglify: {}, <-- Uglify特定的选项 https://webpack.github.io/docs/list-of-plugins.html#uglifyjsplugin复制// postCss: [] <-- Post-CSS 选项: https://github.com/postcss/postcss/blob/master/docs/plugins.md复制// });复制构建配置完成后，有几个命令可以开始构建项目。npm run dev 这个命令仅仅用于产生一个生产就绪的构建文件，并没有把我们静态资源进行压缩，不可发布到线上。npm run watch 基本和npm run dev构建出来的文件一样，但是可以监测到静态资源文件的变化并且自动构建更新静态资源。这里可以配合Browsersync，它可以自动监控你的文件变化，并将更改注入浏览器，而无需手动刷新。你可以通过调用 mix.browserSync() 方法来启用这个功能的支持：// my-domain.dev 为开发域名
mix.browserSync('my-domain.dev');
// 或者...
// https://browsersync.io/docs/options
mix.browserSync({
proxy: 'my-domain.dev'
});复制注意：当你使用 npm run watch 命令的时候 Browsersync 会启动一个localhost:3000的服务。现在，当你修改webpack.mix.js文件监控下的静态资源或者 Laravel 的 PHP 文件时，浏览器会即时刷新页面以响应你的更改。但是这里 Browsersync 会进行 my-domain.dev________的转发，所以为了方便开发，需要手动先配置一个 my-domain.dev 或者开发机的其他端口，然后localhost:3000 的请求就会发送到 my-domain.devnpm run hot 当一段JavaScript被改变时，不仅会刷新页面，还会在浏览器中维护组件的当前状态。npm run production将编译我们所有的静态资源，并产生一个生产就绪的构建。它将运行所有的Mix 任务，并且会压缩文件输出。基本例子让我们用一些小的 CSS 和 JS 创建一个简单的 HTML。假设我们的目录结构如下所示：app/复制|__public/ #webroot复制| |__js/ # JS文件复制| |__css/ # CSS文件复制| |__media/ # 图片或者其他媒体资源复制|复制|__resorces/复制| |__scripts/ # 源JS文件复制| |__styles/ # 源Sass文件爱你复制|复制|__src/ # 我们希望将文件夹“按原样”复制到公共目录中的文件夹。复制|复制package.json复制webpack.mix.js复制接下来写一个简单的 Laravel Mix 配置文件, webpack.mix.js let mix = require('laravel-mix');复制 mix.js('resources/scripts/app.js', 'public/js/app.js')复制 .sass('resources/styles/app.scss', 'public/css/app.css')复制 .copyDirectory('src', 'public');复制上面配置文件的意思是，我们有一个应用的根目录叫做public，然后他的主页是 index.html 使用mix.js()将resources/scripts/app.js构建到public/js/app.js，使用mix.sass()将resources/styles/app.scss构建到public/css/app.css 基本上所有 Laravel Mix的配置和上面的文件都大大同小异。常用的case版本控制和清理缓存开发者经常会使用在编译后的资源文件名加上时间戳或者是唯一的token作为版本号，强迫浏览器加载全新的资源文件，而不是缓存的文件。每次都要手动打版本号确实让人不太爽，但是你可以使用 Laravel Mix de version()它会自动为所有编译文件的文件名附加一个唯一的哈希值，从而实现更方便的缓存清除功能：mix.js('resources/assets/js/app.js', 'public/js')
.version();复制生成版本化文件后，你不会知道确切的文件名。因此，你应该在你的视图中使用 Laravel 的全局辅助函数 mix 来正确加载名称被哈希后的文件。mix 函数会自动确定被哈希的文件名称：<link rel="stylesheet" href="{{ mix('/css/app.css') }}">复制产生的效果大概是这样的：<link rel="stylesheet" href="/css/app.css?id=587234682346">复制每次构建都重新打版本号又会导致很慢，那你还可以这样// 你可以指示版本控制过程仅在 npm run production 运行期间进行复制mix.js('resources/assets/js/app.js', 'public/js');复制if (mix.inProduction) {复制 mix.version();复制}复制切换默认的 Vue 到 ReactLaravel 默认前端框架还是 Vue，如果想切换到 React :php artisan preset react复制配置 postCss例子例如需要配置 Laravel mix 初探/\*\*
- postCss autofix
\*/
mix.options({
postCss:
require('autoprefixer')({
browsers: 'last 2 versions',
cascade: false
})
});复制更多 webpack 配置 Laravel Mix实际上已经预先配置好了 webpack.config.js文件，它会在 Laravel Mix 运行时被引用，如果需要添加一些自定义配置，可以将其他 webpack 配置传递给 mix.webpackConfig()方法。如果这个还是不能满足要求，你完全可以自定义你的 Webpack 配置，拷贝node\_modules/laravel-mix/setup/webpack.config.js 到你的应用的根目录，然后编辑你的package.json文件，并将所有的--config引用指向新复制的配置webpack.config.js。Example"scripts": {"dev": "NODE\_ENV=development webpack --progress --hide-modules --config=webpack.config.js",复制"watch": "NODE\_ENV=development webpack --watch --progress --hide-modules --config=webpack.config.js",复制"hot": "NODE\_ENV=development webpack-dev-server --inline --hot --config=webpack.config.js",复制"production": "NODE\_ENV=production webpack --progress --hide-modules --config=webpack.config.js"复制}复制总结正如你在 demo 中所见一样， Laravel Mix 节约了我们很多的时间，可以不用太担心不会配置 Webpack。如果你之前没有使用过webpack，这是一个很好的入门工具。如果您以前使用过， Laravel Mix 有助于简化整个过程。原创声明，本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。如有侵权，请联系 cloudcommunity@tencent.com 删除。展开阅读全文LaravelnpmwebpackCSSJavaScript举报点赞 6分享登录后参与评论0 条评论相关文章引入 Laravel Mix 管理前端资源到目前为止，我们还是使用很原始的方式引入前端资源文件 —— 在特定目录下存放完整的 CSS、JavaScript 文件，然后在 HTML 文档中静态引入。学院君laravel 学习之路路由视图初探我大致了解了 laravel 下，在开始一个 Http 程序需要先定义路由。之前的例子中，我们的业务逻辑都是在路由里实现，这对于简单的网站或 web 应用没什么...风清醉Homestead + laravel-mix 环境下 hmr 的两种玩法我在前几天刚写过的《让 F5 歇一会儿——laravel-mix 自动刷新之道》[1]中介绍了 laravel-mix 实现自动刷新的几种方法，其中就有涉及 h...overtrue让 F5 歇一会儿——laravel-mix 自动刷新之道原文链接：https://segmentfault.com/a/1190000018863373猿哥Live Coding + ? = Mix昨晚举办了首场liveCoding聚会。有以下几点收获，分享给大家：
1 多人互动实时编程，下一步可以往这个方向发展，提供二维码，主要有手机设备即可链接，一起...mixlabmix的中文是什么_mix是最小的意思吗《mixup：BEYOND EMPIRICAL RISK MINIMIZATION》全栈程序员站长mix-blend-mode这个小圈，与后面的图片进行了反色，而且对于不少图片都有类似效果，我一开始以为是用了两张图片做的处理阿超【玩转腾讯云】已有laravel 添加vuerem适配文档上建议使用lib-flexible，flexible适配的原理是物理像素与逻辑像素的相互转化：物理像素px = window.screen.wid...无忧366MIX 10 Session下载MIX 10已经结束，所有的Session已经放出来了，地址：http://live.visitmix.com/videos。页面上提供了一个下载工具，可惜没有...张善友在 Laravel 项目中使用 Bootstrap 框架如官方文档所言，Laravel 并不强制你使用 CSS 框架，但是开箱提供了对 Bootstrap 的支持，在 resources/js/bootstrap.j...学院君在 Laravel 项目中使用 webpack-encore看过我之前写过的博客的应该知道我一直是 laravel-mix 的死忠粉，有好几篇文章都是关于它的。每每提到 laravel-mix 时更是不吝溢美之词。然而就...猿哥Peewee出错：Illegal mix of collationspeewee.OperationalError: (1267, "Illegal mix of collations (utf8mb4_general_ci,I...用户4040730laravel5.5+vue+Element-ui+vux环境搭建(webpack+laravelMix)(转)本教程例子可到GitHub 上下载 Laravel5.5-Vue-Element-ui-Vuxlin_zoneLaravel中运行Gulp任务的利器（一） —— Laravel Elixir简介及入门教程对现代开发者而言，即使是构建一个很简单的web应用，也要编写很多任务，比如压缩图片、最小化CSS和JavaScript文件、移除调试代码、运行单元测试以及处理很...前朝楚水laravel5.4+vue+element简单搭建(gulp+laravel Elixir)(转){
"private": true,
"scripts": {
"prod": "gulp --production",
"dev": ...lin_zonejava mix 知识点@RequestParam(value = "param") String[] paramWindWantlaravel asset()函数laravel自带了laravel-mix，用于对js、css、图片等静态资源进行打包。生成的文件的命名会是：app.asjduiik2l1323879dasf...全栈程序员站长更多文章作者介绍志航《技思广益 · 腾讯技术人原创集》作者腾讯应用开发腾讯 · 应用开发 (已认证)关注专栏文章9阅读量26.9K获赞115作者排名5893精选专题腾讯云原生专题云原生技术干货，业务实践落地。活动推荐腾讯云自媒体分享计划入驻社区，可分享总价值百万资源包立即入驻邀请好友加入自媒体分享计划邀请好友，同享奖励 30 / 100 / 180 元云服务器代金券立即邀请运营活动广告关闭目录简介Laravel 上面的安装配置 Laravel Mix构建npm run devnpm run watchnpm run hotnpm run production基本例子常用的case版本控制和清理缓存切换默认的 Vue 到 React配置 postCss例子更多 webpack 配置Example"scripts": {总结社区专栏文章阅读清单互动问答技术沙龙技术视频团队主页腾讯云TI平台活动自媒体分享计划邀请作者入驻自荐上首页技术竞赛资源技术周刊社区标签开发者手册开发者实验室关于视频介绍社区规范免责声明联系我们友情链接归档问题归档专栏文章归档快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档腾讯云开发者扫码关注腾讯云开发者领取腾讯云代金券热门产品域名注册云服务器区块链服务消息队列网络加速云数据库域名解析云存储视频直播热门推荐人脸识别腾讯会议企业云CDN 加速视频通话图像分析MySQL 数据库SSL 证书语音识别更多推荐数据安全负载均衡短信文字识别云点播商标注册小程序开发网站监控数据迁移Copyright © 2013 - 2022 Tencent Cloud. All Rights Reserved. 腾讯云版权所有京公网安备 11010802017518 粤B2-20090059-1扫描二维码扫码关注腾讯云开发者领取腾讯云代金券