1.0.2 • Published 2 years ago
zeroojs-deploy-webpack-plugin v1.0.2
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 -Dyarn 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 完整示例