Laravel-Mix
- 概述
- 属于webpack上层,使之八成用例变得易用
- 编绘sass, 捆绑模块到指定模块
- 跨平台
cross-env
,laravel-mix可独立成派勿需强制与laravel一起 - 生产环境文件自动压缩
export NODE_ENV=production webpack
- 安装
-
mix安装
npm init -y npm install laravel-mix --save-dev cp node_modules/laravel-mix/setup/webpack.mix.js ./
-
构建webpack.min.js
mkdir src && touch src/app.{js,scss}
生成项目目录"make": "webpack --config=node_modules/laravel-mix/setup/webpack.config.js"
配置npm run make
编译或相关命令自动监听
-
Api解析
-
编译
mix.js(src | [src], output)
- 作用
- ES2017 + 模块编辑
- 创建并且编译 .vue 组件 (通过 vue-loader)
- 模块热替换
- Tree-shaking 打包技术, webpack 2 里新增的 (移除未使用的库代码)
- 提取和拆分 vendor 库 (通过 mix.extract()), 让长期缓存变的容易
- 自动版本化(文件哈希),通过 mix.version()
- 备注
- src 相对于入口文件webpack.mix.js的全路径
- 支持多个源文件编译,一个出口,支持链式调用
- 支持
react,coffee
,使用时需安装不同的loader,比如vue-loadermix.react(src, output)
mix.preact(src, output)
mix.coffee(src, output)
-
文件切割
mix.js(src, output).extract(['any', 'vendor', 'library'])
- 从打包文件里提取出的库的数组,而非是单独的app.js内
- extract([‘vue’,‘jquery’]),分离vue,jquery代码到vendor.js
- 简单切割三个文件
- 生成应用代码: app.js
- Vendor 库: vendor.js
- Manifest (webpack Runtime): manifest.js 维护源码与编译后的关系
Manifest
文件- 长期缓存的文件
-
浏览器同步刷新
mix.browserSync('my-site.test')
- 浏览器同步脚本将自动监控您的文件是否被修改过了,并将自动刷新浏览器
- Browsersync是浏览器同步测试工具,Browsersync将提供一个新的地址localhost:3000来代理对动态网站的访问
npm run watch
运行开发模式服务器
-
热模块替换
npm run hot
会启动一个 Node 服务器并且监听bundle 文件
-
文件版本化
- 版本化
mix.js('src', 'output').version([])
- 目的避免长期缓存。版本化启用后,文件更改即产生新的版本
- 导入版本化的文件
- SPA(单页程序), 你需要不断读取
Laravel Mix
所生成的manifest.json
文件(格式文件名 :版本化名字,每次编译的时候,版本化名字都会改变) - Laravel提供mix函数,其会自动找到编译后的名字,然后导入HTML(页面接收的是编译后的名字)
- SPA(单页程序), 你需要不断读取
- 版本化额外文件
mix.version(['public/js/random.js'])
部分版本化public/js/random.js?{hash}
附加查询字符串
- 版本化
-
css 预处理器
- 单个方法调用,自动应用 CSS3 前缀
mix.sass('src', 'output', pluginOptions); mix.standaloneSass('src', 'output', pluginOptions); // 与 Webpack 构建隔离。 mix.less('src', 'output', pluginOptions); mix.stylus('src', 'output', pluginOptions); mix.postCss('src', 'output', [require('precss')()]);
-
插件选项
-
编译时, Laravel Mix 的首先是去分别的调用 Node-Sass, Less,和 Slylus 来编译Sass, Less 文件
mix.sass('src', 'destination', { outputStyle: 'nested' })
-
Stylus 插件
// 安装额外插件 mix.stylus('resources/assets/stylus/app.styl', 'public/css', { use: [require('rupture')()] });
-
-
CSS 中的url重写
- 编译时,绝对路径将被排除在url重写之外
- 默认情况下mix会对url重写,如想不变更可如下
mix.sass('src/app.scss', 'dist/').options({ processCssUrls: false });
-
PostCss插件
- 默认情况下,Mix 将通过流行的 Autoprefixer PostCSS plugin 插件管理所有 CSS
-
复制文件
- 应用场景:
- 将字体并将其移动到public 目录
- 复制一个或多个文件到项目中
mix.copy(from, to); mix.copy('from/regex/**/*.txt', to); mix.copy([path1, path2], to); mix.copyDirectory(fromDir, toDir);
- 应用场景:
-
关闭系统提醒
mix.js(src, output).disableNotifications()
-
拼接与压缩
- 拼接文件
mix.combine(['one.js', 'two.js'], 'merged.js')
- 拼接文件与Babel编译
mix.babel(['one.js', 'two.js'], 'merged.js')
- 在文件拼接之后,Laravel Mix将对结果进行Babel编译,让所有浏览器都能理解js代码
- 压缩文件
mix.minify('path/to/file.js')
压缩单个文件mix.minify(['this/one.js', 'and/this/one.js'])
多个- 备注
- 该方法将创建一个额外的 *.min.ext 文件,即压缩 app.js 将生成 app.min.js
- 压缩只会在生产过程中发生,只适用于 CSS 和 JavaScript 文件
- 拼接文件
-
自动加载
-
作用:模块可以作为变量配置在 webpack 当中然后进行自动加载
-
适用场景
- 依赖于全局变量的特定插件或类库
-
示例
// 指定 webpack将var $ = require('jquery') 添加到全局变量 $ 标识符或 window.jQuery 被使用的每个位置 mix.autoload({ jquery: ['$', 'window.jQuery'] });
-
-
事件钩子
- mix.then(function() {}) 注册回调函数
- 监听 webpack 编译完成事件来执行一些程序逻
- 回调函数会传递一个 webpack Stats对象,该对象包含一些编译结果信息
-
Webpack 配置信息
-
语法 mix.webpackConfig({} || cb)
-
配置对象
- 默认情况下,
webpack.config.js
在项目根目录中是不会生效 webpack.mix.js
文件会修改或覆盖默认设置,Mix 将会进行深度合并
- 默认情况下,
-
使用回调
- 在使用回调函数时访问 webpack 及其所有属性
mix.webpackConfig(webpack => { return { plugins: [ new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery', 'window.jQuery': 'jquery' }) ] }; });
-
扩展Mix
- 构建其基于组件的 API 系统
- 语法
mix.extend(string,func | class)
- 参数 触发组件时应该使用的名称,以及注册和组织必要的 webpack 逻辑的回调函数或类。
- 应用分析
- 简单回调对快速扩展有用
- 通常需要构建组件类,该类遵守Mix组件类接口
Mix自定义
- 实时刷新
- LiveReload 自动监视文件并刷新页面
- 流程
- 安装
webpack-livereload-plugin
- 配置webpack.mix.js 添加插件选项
- 安装 LiveReload.js
- 页脚追加脚本
<script src="http://localhost:35729/livereload.js"></script>
- 页脚追加脚本
- 运行开发模式服务器
npm run watch
- 安装
- jQuery UI
-
用于渲染常用组件的函数库,如
datepickers , draggables
等等 -
使用流程
- 构建webpack.min.js配置信息
- 安装jquery-ui
- 加载组件
// resources/assets/js/app.js import $ from 'jquery'; window.$ = window.jQuery = $; import 'jquery-ui/ui/widgets/datepicker.js';
- 加载css样式
// resources/assets/sass/app.scss @import '~jquery-ui/themes/base/all.css';
- 触发加载UI插件
// resources/assets/js/app.js $('#datepicker').datepicker();
-
Mix 配置选项
mix.options({
extractVueStyles: false,
processCssUrls: true,
terser: {},
purifyCss: false,
//purifyCss: {},
postCss: [require('autoprefixer')],
clearConsole: false
});