Deploy Webpack Plugin

适用于 Nginx 静态站点部署。将打包、上传、目录更新一部实现，适用于敏捷开发、站点快速测试、单页面应用。支持单页面History路由，自动配置Nginx。若不试用Nginx则关于Nginx的参数不传递或值为Boolean类型的false即可（nginx|nginxConf）。

适用环境

• Expected Node version "^12.22.0 || ^14.17.0 || >=16.0.0".
• Expected Webpack version ">=4.x".

安装

npm install zeroojs-deploy-webpack-plugin -D

yarn add zeroojs-deploy-webpack-plugin -D

配置

|Name|Type|Default|Description| |---|---|---|---| | port | {String,Number} | 22 | ssh 连接主机端口 | | host | {String} | null | ssh 连接主机地址 | | password | {String} | null | ssh 连接主机密码 | | username | {String} | root | ssh 登录用户名 | | remoteDir | {String} | null | 上传到服务器的位置 | | onlyCompress | {Boolean} | false | 仅打包不上传 | | clear | {String} | all | 可选参数all,client,server。client删除本地压缩包;server删除服务端压缩包;all删除本地和服务端压缩包。 | | nginx | {String} | null | 服务器 Nginx 脚本路径 | | nginxConf | {String} | null | 服务器 Nginx 站点配置文件 | | history | {Boolean} | true | 单页面 history 路由模式 |

示例

webpack.config.js

const { resolve } = require('path')
const DelopyPlugin = require('zeroojs-deploy-webpack-plugin')
const config = require('../config')
const version = '1.0.0'

module.exports = {
  mode: 'production',
  output: {
    path: resolve(__dirname, `./dist/v${version}`)
  },
  plugins: [
    new DelopyPlugin(config)
  ]
}

可查看 Webpack 完整示例

Vue -> vue.config.js

const { defineConfig } = require('@vue/cli-service')
const DelopyPlugin = require('zeroojs-deploy-webpack-plugin')
const deployConfig = require('../config')
const { version } = require('./package.json')

module.exports = defineConfig({
  transpileDependencies: true,
  outputDir: `./dist/v${version}`,
  configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      config.plugins.push(new DelopyPlugin(deployConfig))
    }
  }
})

可查看 Vue 完整示例

React config-overrides.js

const { addWebpackPlugin, override } = require('customize-cra')
const DelopyPlugin = require('zeroojs-deploy-webpack-plugin')
const config = require('../config')

module.exports = {
  webpack: override(
    addWebpackPlugin(new DelopyPlugin(config))
  )
}

可查看 React 完整示例