vscode + webpack 自动打包部署

不多说直接干货

2个插件

vscode 插件 vspWepackautoUploadJ 为了方便更改(webpack 插件webpack-auto-upload-j的1.0.4版本新增的开关)

webpack 插件webpack-auto-upload-j 最新0.0.3版本新加了是否上传服务器的控制开关(就是在package.json中加入了up.kaiguan和其他配置)

一套配套的自动打包上传文件的webpack插件加vscode插件

安装

vscode插件 vspWepackautoUploadJ 在vscode 插件搜索框中搜索 vspWepackautoUploadJ 安装即可
webpack插件 webpack-auto-upload-j 安装

npm install webpack-auto-upload-j

vscode 插件 vspWepackautoUploadJ的使用

安装完插件后 , 在package.json中加入

{
  "up": {
		"build": "npm run build", // 自己配置
		"build_upload_test": "npm run build", // 自己配置
		"build_upload_pro": "npm run build", // 自己配置
		"kaiguan": 2
	}
}

如下图

在vscode中鼠标右键有3个菜单选项

• build 点击之后， 如果在package.json中有up 并且是Object
  • 1.up 中有kaiguan属性，会把kaiguan设置为0，打包完不上传服务器
  • 2.up 中有build 属性,会运行 build 设置的命令
• build_upload_test 点击之后， 如果在package.json中有up 并且是Object
  • 1.up 中有kaiguan属性，会把kaiguan设置为1，打包完会上传配置文件的test服务器
  • 2.up 中有build_upload_test 属性,会运行 build_upload_test 设置的命令
• build_upload_pro 点击之后， 如果在package.json中有up 并且是Object
  • 1.up 中有kaiguan属性，会把kaiguan设置为2，打包完会上传配置文件的test服务器
  • 2.up 中有build_upload_pro 属性,会运行 build_upload_pro 设置的命令

vscode 插件 vspWepackautoUploadJ 到这里就配置完了

webpack插件 webpack-auto-upload-j的使用

使用

在你的webpack.config.js中的plugins加入一项new WebpackAutoUploadJ(配置参数) <br/

在写路径的时候如果是 左斜杠\，记得转义，换成\\，如果是右斜杠，就不用管

我是webpack的配置示列

const WebpackAutoUploadJ = require('webpack-auto-upload-j')
{
  plugins: [
    new WebpackAutouploadJ({
      path: 'E:\\xxx\\xxx\\xxx\\abc.json', // 这里是一个你本地json文件的绝对路径，是你自己的配置,示列在下面
      key: 'my-blog-web'
    }),
  ]
}

我是本地json文件的配置示列

{
  "my-blog-web": {
    "build_upload_test": {
      "host": "xxx.xxx.xxx.xxx",
      "port": 22,
      "user": "root",
      "password": "xxxxxxx",
      "entryDir": "dabao",
      "serviceDir": "/usr/xxx/xxx/dabao_test"
    },
    "build_upload_pro": {
      "host": "xxx.xxx.xxx.xxx",
      "port": 22,
      "user": "root",
      "password": "xxxxxxx",
      "entryDir": "dabao",
      "serviceDir": "/usr/xxx/xxx/dabao"
    }
  }
}

我是项目package.json文件的配置示列

{
  "up": {
		"build": "npm run build", // 自己配置
		"build_upload_test": "npm run build", // 自己配置
		"build_upload_pro": "npm run build", // 自己配置
		"kaiguan": 2
	}
}

kaiguan

• 如果是0，不会上传服务器，
• 如果是1，上传的是上面本地json文件配置的build_upload_test中的serviceDir
• 如果是2，上传的是上面本地json文件配置的build_upload_pro中的serviceDir

property

entryDir String or Array // relative path 相对路径
serviceDir String or Array
serviceConfig Object
* host your service IP
* port your service Prot

如果entryDir 是 数组

• serviceDir 必须也是 数组
  
• entryDir的长度 不能 小于 serviceDir的长度
  

如果entryDir 是 字符串 并且 serviceDir 是 数组

• entryDir 中的 文件 会传到 serviceDir 的 每个地址
  

上传服务器的结果，显示

vscode 插件 vspWepackautoUploadJ源码

webpack 插件webpack-auto-upload-j源码