基于Webpack2的前端打包工具-lucii

lucii是一套对Webpack2打包过程的轻封装，基于webpack2编译过程最佳实践集成了调试，打包，代理，mock数据和发布代码功能，由JSON的形式配置Api，配置过程不超过一分钟，尤其对Webpack不熟悉的新手可以简单快捷的使用lucii构建项目

适用范围

lucii是Webpack对React编译过程的分装，目前支持React/Vue产品线

安装

npm i lucii

使用方式

lucii提供5个api：lucii [build, dll, mock, server, deploy]

打包第三方文件

lucii dll // build commons to vendor

启动项目

lucii server // release and init service

启动mock服务器

lucii mock // init a server for mock

发布文件到服务器

lucii deploy // deploy files to server

编译打包文件

lucii build // build files

新建脚手架服务

lucii cli --vue/ react // init a programe

调试 && 打包

lucii使用webpack对项目进行打包，打包过程api配置如下：

{
    "publicPath": "/",
    "entry": {
        "main": "./src/main.js"
    },
    // 默认dependences作为commons
    "server": {
        "port": 8046,
        "host": "localhost"
    },
    "html": {
        "title": "D.va",
        "favicon": "./favicon.ico",
        "template": "./index.html"
    }
}

| 参数 | 描述 | | ---- | ---- | | entry | 项目入口，配置同Webpack entry | | template | html 模板入口，使用同 HtmlWebpackPlugin output.template | | host | 默认localhost | | port | 端口默认 8352 |

代理

lucii代理方式包括get、post、fetch、put等，并且可以设置跨域携带cookie

{
    "proxy": "./config/proxy.js" || () => new Promise,
}

| 参数 | 描述 | | ---- | ---- | | proxy | 代理地址(Promise对象) |

数据mock

基于JSONserver模拟mock数据

{
    "mock": {
        "path": "./mock",
        "port": 3002,
        "dist": "./wiki"
    }
}

| 参数 | 描述 | | ---- | ---- | | path | mock文件地址 | | port | mock数据端口，默认3001 | | dist | 生成wiki存放地址 |

代码发布

lucii 与fis3-deploy功能无缝对接，可以完成文件发布功能

{
    "deploy": {
        "dir": "./dist",
        "server": "http://x.x.x.x/receiver.php",
        "to": "/home/work/odp/template/boss/"
    }
}

| 参数 | 描述 | | ---- | ---- | | path | 要发送的文件地址 | | server | 接受服务器receiver | | to | 服务器目录 |

TODO

• [x] 良好的报错
• [x] 插件扩展