本webpack插件功能：
- 处理静态资源路径，并以watch mode编译
- 将编译后的文件自动上传到指定服务器指定目录
- 在终端打印出页面入口地址并生成二维码，供手机扫描访问
- 监听模式下，一旦保存修改，将自动增量编译
- 有变化的文件会被自动增量上传到服务器
- 手机刷新页面或再次扫码即可
安装
npm install @nutui/carefree --save-dev使用
- 在
webpack配置文件中引入
const Carefree = require('@nutui/carefree');
plugins: [
new Carefree({
//配置项
})
]- 在
package.json的scripts字段中添加carefree-dev和carefree-build命令
// package.json
scripts: {
...
"carefree-dev": "cross-env NODE_ENV=carefree carefree_env=dev webpack -w --colors --progress",
"carefree-build": "cross-env carefree_env=build npm run upload",
...
}- 如果想在启用脚本时暂时不使用
carefree，可在脚本里修改carefree_env为cross-env carefree_env=stop - 命令行将会打印出二维码，推荐命令行终端的主题为暗黑系
- 目前支持
ssh与ftp两种上传方式 -
upload设置为false将只打印二维码，不上传静态资源 - 默认关闭
devtool以减小上传文件的体积，需要时可以设置为webpack的devtool相应值
Carefree参数说明
| 参数 | 说明 | 默认值 | 是否必填 |
|---|---|---|---|
| upload | 是否上传 | true | 否 |
| devtool | 参考webpack的devtool配置 | false | 否 |
| publicPath | 同webpackConfig.output.publicPath | - | 是 |
| qrcodeUrl | 扫二维码后跳转的地址 | publicPath + 'index.html' | 否 |
| ftp.host | 服务器ip | -- | 是 |
| ftp.port | 服务器 | -- | 是 |
| ftp.source | 待上传的目录 | -- | 是 |
| ftp.target | 服务器端的项目目录 | -- | 是 |
| ftp.username | 服务器用户名 | -- | 是 |
| ftp.password | 服务器密码 | -- | 是 |
| ssh[option] | 同ftp相关配置项 | -- | 是 |