laravel-mix API简录

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-loader
      • mix.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（页面接收的是编译后的名字）
  • 版本化额外文件
    • 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 自动监视文件并刷新页面
  • 流程
    1. 安装webpack-livereload-plugin
    2. 配置webpack.mix.js 添加插件选项
    3. 安装 LiveReload.js
       • 页脚追加脚本<script src="http://localhost:35729/livereload.js"></script>
    4. 运行开发模式服务器
       • npm run watch
• jQuery UI

  • 用于渲染常用组件的函数库,如datepickers ， draggables 等等

  • 使用流程

    1. 构建webpack.min.js配置信息
    2. 安装jquery-ui
    3. 加载组件

        // resources/assets/js/app.js
    
        import $ from 'jquery';
        window.$ = window.jQuery = $;
    
        import 'jquery-ui/ui/widgets/datepicker.js';
    

    4. 加载css样式

        // resources/assets/sass/app.scss
        @import '~jquery-ui/themes/base/all.css';
    

    5. 触发加载UI插件

      // resources/assets/js/app.js
      $('#datepicker').datepicker();
    

Mix 配置选项

  mix.options({
      extractVueStyles: false,
      processCssUrls: true,
      terser: {},
      purifyCss: false,
      //purifyCss: {},
      postCss: [require('autoprefixer')],
      clearConsole: false
  });