carefree-webpack-plugin

本webpack插件功能：

1. 处理静态资源路径，并以watch mode编译
2. 将编译后的文件自动上传到指定服务器指定目录
3. 在终端打印出页面入口地址并生成二维码，供手机扫描访问
4. 监听模式下，一旦保存修改，将自动增量编译
5. 有变化的文件会被自动增量上传到服务器
6. 手机刷新页面或再次扫码即可

安装

npm install @liwb/carefree-webpack-plugin --save-dev
or
yarn add @liwb/carefree-webpack-plugin --dev

使用

1. 在webpack配置文件中引入

const Carefree = require('@liwb/carefree-webpack-plugin');

plugins: [
    new Carefree({
        //配置项
    })
]

2. 在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 node huild/upload",
    ...
}

// upload.js
const ClientUpload = require('@liwb/carefree-webpack-plugin/lib/upload');
const {host, port, source, username, password, target} = require('../carefree.json');

ClientUpload({
  source: 'dist',
  ignoreRegexp: /node_modules/,
  success: function () {
  },
  sftpOption: {
    host,
    port,
    username,
    password,
    source,
    target
  }
});

// carefree.json
{
  "host": "0.0.0.0",
  "port": "22",
  "source": "dist",
  "username": "root",
  "password": "******",
  "target": "/usr/local/nginx/html/h5-test"
}

3. 如果想在启用脚本时暂时不使用carefree，可在脚本里修改carefree_env为cross-env carefree_env=stop
4. 命令行将会打印出二维码，推荐命令行终端的主题为暗黑系
5. 目前支持ssh与ftp两种上传方式
6. upload设置为false将只打印二维码，不上传静态资源
7. 默认关闭devtool以减小上传文件的体积，需要时可以设置为webpack的devtool相应值

参数说明

| 参数 | 说明 | 默认值 | 是否必填 |----- | ----- | ----- | ----- | 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相关配置项 | -- | 是