add

08335 / hivui-platform-template

hivui平台项目模板

Browse code add master
1 parent b00f7af commit 0e2f5cc71a8c131fe4e12544c584687a4faeb3ff caibinghong authored on 28 Sep 2021

Showing 2 changed files

Ignore Space Show notes View build/bin/oper.sh
#!/bin/bash ## 权限问题，用 chmod u+x .sh ## eg: ## cd /mobileproject/$1/XcxProject hivui create $1 if [ $# -gt 4 ] ; then echo "$3 操作命令有误，请重新输入！" exit 1 fi # basePath='/opt/eap5/desktop' basePath='/eap5.0/desktop' tagPath=$basePath'/preview' # tmpPath=$basePath'/project-template' tmpPath='/eap5.0/hiruntime/project/desktop/project-template' gitTmp='/eap5.0/hiruntime/project/desktop/__gittmp' workName=$1 projectName=$2 oper=$3 uploadPath=$4 syncWay=$4 source[0]='\t<% if(htmlWebpackPlugin.vite){%>\n\t<!--预览时公共库-->' source[1]='\n\t<script src="\/'$projectName'\/setting\/desktop\/appsetting\/js\/1.0.0\/appsetting.js" type="text\/javascript"><\/script>' source[2]='\n\t<%}%>' source[3]='\n\t<% if(!htmlWebpackPlugin.vite){%>\n\t<!--发布时公共库-->' source[4]='\n\t<script src="\/freemark\/render\/'$projectName'\/setting\/desktop\/appsetting\/js\/1.0.0\/appsetting.js" type="text\/javascript"><\/script>' source[5]='\n\t<%}%>\n' ## aaa=$(pm2 id "vite-${workName}-${projectName}") ## [] 说明服务有启动但是，没有执行 ## if [ ${#aaa} = 2 ] ; then ## echo "===================" ## fi ## 参数工号$1 项目名$2 端口$3 ## 工号=工作空间 ## 1、判断工作空间没有就创建 # if [ ! -d "${tagPath}/${workName}" ];then # echo "${oper} 命令：工作空间不存在！" # exit 1 # fi ## 2、判断项目名 if [ ! -d "${tagPath}/${workName}/${projectName}" ];then echo "${oper} 命令：项目名不存在！" # exit 1 fi ## 返回预览目录 # cd ${tagPath}/${workName}/${projectName}/deploy if [ $3 = "restart" ] ; then ### 用pm2管理，用pm2 重启指定的 pm2 restart "vite-${workName}-${projectName}" #yarn run pm2:restart vite-${workName}-${projectName} fi if [ $3 = "start" ] ; then pm2 delete "vite-${workName}-${projectName}" ### 用pm2管理，用pm2 重启指定的 cd ${tagPath}/${workName}/${projectName}/deploy yarn run pm2:start fi if [ $oper = "kill" ] ; then ### 用pm2管理，用pm2 重启指定的 pm2 delete "vite-${workName}-${projectName}" #yarn run pm2:kill vite-${workName}-${projectName} fi if [ $oper = "stop" ] ; then ### 用pm2管理，用pm2 重启指定的 pm2 stop "vite-${workName}-${projectName}" #yarn run pm2:stop vite-${workName}-${projectName} fi if [ $oper = "del" ] ; then if [ $workName = "admin" -a $projectName = "systpl" ] ; then echo "系统模板，不可删除！" exit 1 fi curPid=`pm2 pid vite-${workName}-${projectName}` if [ ! -z "$curPid" ];then echo "vite-${workName}-${projectName} 服务正在关闭！" pm2 delete "vite-${workName}-${projectName}" fi ### 删除用户项目 cd "${tagPath}/${workName}" rm -r -f "${projectName}" echo "vite-${workName}-${projectName} 删除成功！" fi if [ $oper = "build" ] ; then ### 用pm2管理，用pm2 重启指定的 cd "${tagPath}/${workName}/${projectName}/deploy" npm run build #yarn run pm2:stop vite-${workName}-${projectName} cd "${tagPath}/${workName}/${projectName}/deploy/" zip -q -r "${workName}_${projectName}_dist.zip" ./dist if [[ ! -d "$uploadPath" ]]; then echo "${oper} 命令：上传文件夹不存在, 正在帮您创建目录..." mkdir -p "${uploadPath}" fi cp -f "${workName}_${projectName}_dist.zip" "${uploadPath}" # echo "(‐^▽^‐) 恭喜您 ${oper} 命令，很顺利的执行完毕！" fi if [ $oper = "sync" ] ; then git clone http://192.168.4.105:8080/gitbucket/git/08335/hivui-platform-template.git "${gitTmp}" echo ${gitTmp} echo ${tmpPath} rsync -auz "${gitTmp}/" ${tmpPath} rm -rf ${gitTmp} if [ $syncWay = "build" ] ; then echo "正在同步build..." rsync -auz ${tmpPath}/build ${tagPath}/${workName}/${projectName}/deploy/ echo "build已同步！" fi if [ $syncWay = "login" ] ; then echo "正在同步login模块..." rsync -auz ${tmpPath}/project/hivuiLogin ${tagPath}/${workName}/${projectName}/deploy/${projectName}/ cd ${tagPath}/${workName}/${projectName}/deploy/${projectName}/hivuiLogin sed -i 's/<\/head>/'"${source[]}"'<\/head>/g' index.html echo "login已同步！" fi if [ $syncWay = "main" ] ; then echo "正在同步main模块..." rsync -auz ${tmpPath}/project/hivuiMain ${tagPath}/${workName}/${projectName}/deploy/${projectName}/ cd ${tagPath}/${workName}/${projectName}/deploy/${projectName}/hivuiMain sed -i 's/<\/head>/'"${source[]}"'<\/head>/g' index.html echo "main已同步！" fi if [ $syncWay = "assets" ] ; then echo "正在同步assets_platform资源..." rsync -auz ${tmpPath}/assets_platform ${tagPath}/${workName}/${projectName}/deploy/ echo "assets_platform资源已同步！" fi if [ $syncWay = "hiui" ] ; then echo "正在同步hi-ui库..." cd "${tmpPath}/" npm i hi-ui -S rsync -auz ${tmpPath}/node_modules/hi-ui ${tagPath}/${workName}/${projectName}/deploy/node_modules/ echo "hiui已同步！" fi if [ $syncWay = "task" ] ; then echo "正在同步hi-taskcenter库..." cd "${tmpPath}/" npm i hi-ui -S rsync -auz ${tmpPath}/node_modules/hi-taskcenter ${tagPath}/${workName}/${projectName}/deploy/node_modules/ echo "hi-taskcenter已同步！" fi if [ $syncWay = "mod" ] ; then echo "正在同步node_modules环境..." cd "${tmpPath}/" npm i rsync -auz ${tmpPath}/node_modules ${tagPath}/${workName}/${projectName}/deploy/ echo "node_modules已同步！" fi if [ $syncWay = "all" ] ; then echo "all" fi rsync -auz ${tmpPath}/package.json ${tagPath}/${workName}/${projectName}/deploy/package.json cd ${tagPath}/${workName}/${projectName}/deploy/ ## 替换 package.json 的 name 值 sed -i 's#\("name": \?"\).#\1'"${projectName}"'",#g' package.json pm2 delete "vite-${workName}-${projectName}" npm run rm:vite npm run pm2:start pm2 save fi #!/bin/bash ## 权限问题，用 chmod u+x .sh ## eg: ## cd /mobileproject/$1/XcxProject hivui create $1 if [ $# -gt 4 ] ; then echo "$3 操作命令有误，请重新输入！" exit 1 fi # basePath='/opt/eap5/desktop' basePath='/eap5.0/desktop' tagPath=$basePath'/preview' # tmpPath=$basePath'/project-template' tmpPath='/eap5.0/hiruntime/project/desktop/project-template' gitTmp='/eap5.0/hiruntime/project/desktop/__gittmp' workName=$1 projectName=$2 oper=$3 uploadPath=$4 syncWay=$4 source[0]='\t<% if(htmlWebpackPlugin.vite){%>\n\t<!--预览时公共库-->' source[1]='\n\t<script src="\/'$projectName'\/setting\/desktop\/appsetting\/js\/1.0.0\/appsetting.js" type="text\/javascript"><\/script>' source[2]='\n\t<%}%>' source[3]='\n\t<% if(!htmlWebpackPlugin.vite){%>\n\t<!--发布时公共库-->' source[4]='\n\t<script src="\/freemark\/render\/'$projectName'\/setting\/desktop\/appsetting\/js\/1.0.0\/appsetting.js" type="text\/javascript"><\/script>' source[5]='\n\t<%}%>\n' ## aaa=$(pm2 id "vite-${workName}-${projectName}") ## [] 说明服务有启动但是，没有执行 ## if [ ${#aaa} = 2 ] ; then ## echo "===================" ## fi ## 参数工号$1 项目名$2 端口$3 ## 工号=工作空间 ## 1、判断工作空间没有就创建 # if [ ! -d "${tagPath}/${workName}" ];then # echo "${oper} 命令：工作空间不存在！" # exit 1 # fi ## 2、判断项目名 if [ ! -d "${tagPath}/${workName}/${projectName}" ];then echo "${oper} 命令：项目名不存在！" # exit 1 fi ## 返回预览目录 # cd ${tagPath}/${workName}/${projectName}/deploy if [ $3 = "restart" ] ; then ### 用pm2管理，用pm2 重启指定的 pm2 restart "vite-${workName}-${projectName}" #yarn run pm2:restart vite-${workName}-${projectName} fi if [ $3 = "start" ] ; then pm2 delete "vite-${workName}-${projectName}" ### 用pm2管理，用pm2 重启指定的 cd ${tagPath}/${workName}/${projectName}/deploy yarn run pm2:start fi if [ $oper = "kill" ] ; then ### 用pm2管理，用pm2 重启指定的 pm2 delete "vite-${workName}-${projectName}" #yarn run pm2:kill vite-${workName}-${projectName} fi if [ $oper = "stop" ] ; then ### 用pm2管理，用pm2 重启指定的 pm2 stop "vite-${workName}-${projectName}" #yarn run pm2:stop vite-${workName}-${projectName} fi if [ $oper = "del" ] ; then if [ $workName = "admin" -a $projectName = "systpl" ] ; then echo "系统模板，不可删除！" exit 1 fi curPid=`pm2 pid vite-${workName}-${projectName}` if [ ! -z "$curPid" ];then echo "vite-${workName}-${projectName} 服务正在关闭！" pm2 delete "vite-${workName}-${projectName}" fi ### 删除用户项目 cd "${tagPath}/${workName}" rm -r -f "${projectName}" echo "vite-${workName}-${projectName} 删除成功！" fi if [ $oper = "build" ] ; then ### 用pm2管理，用pm2 重启指定的 cd "${tagPath}/${workName}/${projectName}/deploy" npm run build #yarn run pm2:stop vite-${workName}-${projectName} cd "${tagPath}/${workName}/${projectName}/deploy/" zip -q -r "${workName}_${projectName}_dist.zip" ./dist if [[ ! -d "$uploadPath" ]]; then echo "${oper} 命令：上传文件夹不存在, 正在帮您创建目录..." mkdir -p "${uploadPath}" fi cp -f "${workName}_${projectName}_dist.zip" "${uploadPath}" # echo "(‐^▽^‐) 恭喜您 ${oper} 命令，很顺利的执行完毕！" fi if [ $oper = "sync" ] ; then git clone http://192.168.4.105:8080/gitbucket/git/08335/hivui-platform-template.git "${gitTmp}" echo ${gitTmp} echo ${tmpPath} rsync -auz "${gitTmp}/" ${tmpPath} rm -rf ${gitTmp} if [ $syncWay = "login" ] ; then echo "正在同步login模块..." rsync -auz ${tmpPath}/project/hivuiLogin ${tagPath}/${workName}/${projectName}/deploy/${projectName}/ cd ${tagPath}/${workName}/${projectName}/deploy/${projectName}/hivuiLogin sed -i 's/<\/head>/'"${source[]}"'<\/head>/g' index.html echo "login已同步！" fi if [ $syncWay = "main" ] ; then echo "正在同步main模块..." rsync -auz ${tmpPath}/project/hivuiMain ${tagPath}/${workName}/${projectName}/deploy/${projectName}/ cd ${tagPath}/${workName}/${projectName}/deploy/${projectName}/hivuiMain sed -i 's/<\/head>/'"${source[]}"'<\/head>/g' index.html echo "main已同步！" fi if [ $syncWay = "assets" ] ; then echo "正在同步assets_platform资源..." rsync -auz ${tmpPath}/assets_platform ${tagPath}/${workName}/${projectName}/deploy/ echo "assets_platform资源已同步！" fi if [ $syncWay = "hiui" ] ; then echo "正在同步hi-ui库..." cd "${tmpPath}/" npm i hi-ui -S rsync -auz ${tmpPath}/node_modules/hi-ui ${tagPath}/${workName}/${projectName}/deploy/node_modules/ echo "hiui已同步！" fi if [ $syncWay = "task" ] ; then echo "正在同步hi-taskcenter库..." cd "${tmpPath}/" npm i hi-ui -S rsync -auz ${tmpPath}/node_modules/hi-taskcenter ${tagPath}/${workName}/${projectName}/deploy/node_modules/ echo "hi-taskcenter已同步！" fi if [ $syncWay = "mod" ] ; then echo "正在同步node_modules环境..." cd "${tmpPath}/" npm i rsync -auz ${tmpPath}/node_modules ${tagPath}/${workName}/${projectName}/deploy/ echo "node_modules已同步！" fi if [ $syncWay = "all" ] ; then echo "all" fi rsync -auz ${tmpPath}/package.json ${tagPath}/${workName}/${projectName}/deploy/package.json cd ${tagPath}/${workName}/${projectName}/deploy/ ## 替换 package.json 的 name 值 sed -i 's#\("name": \?"\).#\1'"${projectName}"'",#g' package.json pm2 delete "vite-${workName}-${projectName}" npm run rm:vite npm run pm2:start pm2 save fi

Ignore Space Show notes View

build/bin/oper.sh

#!/bin/bash
## 权限问题，用  chmod u+x *.sh
## eg:
## cd /mobileproject/$1/XcxProject hivui create $1
if [ $# -gt 4 ] ; then
    echo "$3 操作命令有误，请重新输入！"
    exit 1
fi

# basePath='/opt/eap5/desktop'
basePath='/eap5.0/desktop'
tagPath=$basePath'/preview'
# tmpPath=$basePath'/project-template'
tmpPath='/eap5.0/hiruntime/project/desktop/project-template'
gitTmp='/eap5.0/hiruntime/project/desktop/__gittmp'
workName=$1
projectName=$2
oper=$3
uploadPath=$4
syncWay=$4
  
source[0]='\t<% if(htmlWebpackPlugin.vite){%>\n\t'
source[1]='\n\t<script src="\/'$projectName'\/setting\/desktop\/appsetting\/js\/1.0.0\/appsetting.js" type="text\/javascript"><\/script>'
source[2]='\n\t<%}%>'
source[3]='\n\t<% if(!htmlWebpackPlugin.vite){%>\n\t'
source[4]='\n\t<script src="\/freemark\/render\/'$projectName'\/setting\/desktop\/appsetting\/js\/1.0.0\/appsetting.js" type="text\/javascript"><\/script>'
source[5]='\n\t<%}%>\n'
## aaa=$(pm2 id "vite-${workName}-${projectName}")
## [] 说明服务有启动但是，没有执行
## if [ ${#aaa} = 2 ] ; then
##	echo "==================="
## fi

## 参数  工号$1  项目名$2  端口$3
## 工号=工作空间
## 1、判断工作空间 没有就创建
# if [ ! -d "${tagPath}/${workName}" ];then
#     echo "${oper} 命令： 工作空间不存在！"
#     exit 1
# fi

## 2、判断项目名
if [ ! -d "${tagPath}/${workName}/${projectName}" ];then
    echo "${oper} 命令： 项目名不存在！"
    # exit 1
fi

## 返回预览目录
# cd ${tagPath}/${workName}/${projectName}/deploy

if [ $3 = "restart" ] ; then
    ### 用pm2管理，用pm2 重启指定的
    pm2 restart "vite-${workName}-${projectName}" 
    #yarn run pm2:restart vite-${workName}-${projectName}
fi

if [ $3 = "start" ] ; then    
    pm2 delete "vite-${workName}-${projectName}"
    ### 用pm2管理，用pm2 重启指定的
    cd ${tagPath}/${workName}/${projectName}/deploy
    yarn run pm2:start
fi

if [ $oper = "kill" ] ; then
    ### 用pm2管理，用pm2 重启指定的
    pm2 delete "vite-${workName}-${projectName}" 
    #yarn run pm2:kill vite-${workName}-${projectName}
fi

if [ $oper = "stop" ] ; then
    ### 用pm2管理，用pm2 重启指定的
    pm2 stop "vite-${workName}-${projectName}" 
    #yarn run pm2:stop vite-${workName}-${projectName}
fi

if [ $oper = "del" ] ; then

if [ $workName = "admin" -a $projectName = "systpl" ] ; then
        echo "系统模板，不可删除！"
        exit 1
    fi

curPid=`pm2 pid vite-${workName}-${projectName}`
    if [ ! -z "$curPid" ];then
        echo "vite-${workName}-${projectName} 服务正在关闭！"
        pm2 delete "vite-${workName}-${projectName}" 
    fi

### 删除用户项目
    cd "${tagPath}/${workName}"
    rm -r -f "${projectName}"
    echo "vite-${workName}-${projectName} 删除成功！"

if [ $oper = "build" ] ; then
    ### 用pm2管理，用pm2 重启指定的
    cd "${tagPath}/${workName}/${projectName}/deploy"
    npm run build
    #yarn run pm2:stop vite-${workName}-${projectName}
    cd "${tagPath}/${workName}/${projectName}/deploy/"
    zip -q -r "${workName}_${projectName}_dist.zip"  ./dist

if [[ ! -d "$uploadPath" ]]; then
        echo "${oper} 命令： 上传文件夹不存在, 正在帮您创建目录..."
        mkdir -p "${uploadPath}"
    fi

cp -f "${workName}_${projectName}_dist.zip"  "${uploadPath}"
    # echo "(‐^▽^‐) 恭喜您 ${oper} 命令，很顺利的执行完毕！"
fi

if [ $syncWay = "build" ] ; then
        echo "正在同步build..."
        rsync -auz ${tmpPath}/build ${tagPath}/${workName}/${projectName}/deploy/
        echo "build已同步！"

if [ $syncWay = "login" ] ; then
        echo "正在同步login模块..."
        rsync -auz ${tmpPath}/project/hivuiLogin ${tagPath}/${workName}/${projectName}/deploy/${projectName}/
        cd ${tagPath}/${workName}/${projectName}/deploy/${projectName}/hivuiLogin
        sed -i 's/<\/head>/'"${source[*]}"'<\/head>/g' index.html
        echo "login已同步！"
    fi
    
    if [ $syncWay = "main" ] ; then
        echo "正在同步main模块..."
        rsync -auz ${tmpPath}/project/hivuiMain ${tagPath}/${workName}/${projectName}/deploy/${projectName}/
        cd ${tagPath}/${workName}/${projectName}/deploy/${projectName}/hivuiMain
        sed -i 's/<\/head>/'"${source[*]}"'<\/head>/g' index.html
        echo "main已同步！"
    fi
    
    if [ $syncWay = "assets" ] ; then
        echo "正在同步assets_platform资源..."
        rsync -auz ${tmpPath}/assets_platform ${tagPath}/${workName}/${projectName}/deploy/
        echo "assets_platform资源已同步！"
    fi

if [ $syncWay = "hiui" ] ; then
        echo "正在同步hi-ui库..."
        cd "${tmpPath}/"
        npm i hi-ui -S
        rsync -auz ${tmpPath}/node_modules/hi-ui ${tagPath}/${workName}/${projectName}/deploy/node_modules/
        echo "hiui已同步！"
    fi
    
    if [ $syncWay = "task" ] ; then
        echo "正在同步hi-taskcenter库..."
        cd "${tmpPath}/"
        npm i hi-ui -S
        rsync -auz ${tmpPath}/node_modules/hi-taskcenter ${tagPath}/${workName}/${projectName}/deploy/node_modules/
        echo "hi-taskcenter已同步！"
    fi
    
    if [ $syncWay = "mod" ] ; then
        echo "正在同步node_modules环境..."
        cd "${tmpPath}/"        
        npm i 
        rsync -auz ${tmpPath}/node_modules ${tagPath}/${workName}/${projectName}/deploy/
        echo "node_modules已同步！"
    fi
    
    if [ $syncWay = "all" ] ; then
        echo "all"
    fi
    
    rsync -auz ${tmpPath}/package.json ${tagPath}/${workName}/${projectName}/deploy/package.json
    cd ${tagPath}/${workName}/${projectName}/deploy/
    ## 替换 package.json 的 name 值
    sed -i 's#$"name": \?"$.*#\1'"${projectName}"'",#g' package.json
    pm2 delete "vite-${workName}-${projectName}"
    npm run rm:vite
    npm run pm2:start
    pm2 save

#!/bin/bash
## 权限问题，用  chmod u+x *.sh
## eg:
## cd /mobileproject/$1/XcxProject hivui create $1
if [ $# -gt 4 ] ; then
    echo "$3 操作命令有误，请重新输入！"
    exit 1
fi

## 2、判断项目名
if [ ! -d "${tagPath}/${workName}/${projectName}" ];then
    echo "${oper} 命令： 项目名不存在！"
    # exit 1
fi

## 返回预览目录
# cd ${tagPath}/${workName}/${projectName}/deploy

if [ $3 = "restart" ] ; then
    ### 用pm2管理，用pm2 重启指定的
    pm2 restart "vite-${workName}-${projectName}" 
    #yarn run pm2:restart vite-${workName}-${projectName}
fi

if [ $oper = "kill" ] ; then
    ### 用pm2管理，用pm2 重启指定的
    pm2 delete "vite-${workName}-${projectName}" 
    #yarn run pm2:kill vite-${workName}-${projectName}
fi

if [ $oper = "stop" ] ; then
    ### 用pm2管理，用pm2 重启指定的
    pm2 stop "vite-${workName}-${projectName}" 
    #yarn run pm2:stop vite-${workName}-${projectName}
fi

if [ $oper = "del" ] ; then

if [ $workName = "admin" -a $projectName = "systpl" ] ; then
        echo "系统模板，不可删除！"
        exit 1
    fi

### 删除用户项目
    cd "${tagPath}/${workName}"
    rm -r -f "${projectName}"
    echo "vite-${workName}-${projectName} 删除成功！"

if [[ ! -d "$uploadPath" ]]; then
        echo "${oper} 命令： 上传文件夹不存在, 正在帮您创建目录..."
        mkdir -p "${uploadPath}"
    fi

cp -f "${workName}_${projectName}_dist.zip"  "${uploadPath}"
    # echo "(‐^▽^‐) 恭喜您 ${oper} 命令，很顺利的执行完毕！"
fi

if [ $oper = "sync" ] ; then
    git clone http://192.168.4.105:8080/gitbucket/git/08335/hivui-platform-template.git "${gitTmp}"
    echo ${gitTmp} 
    echo ${tmpPath}
    rsync -auz "${gitTmp}/" ${tmpPath}
    rm -rf ${gitTmp}
    if [ $syncWay = "login" ] ; then
        echo "正在同步login模块..."
        rsync -auz ${tmpPath}/project/hivuiLogin ${tagPath}/${workName}/${projectName}/deploy/${projectName}/
        cd ${tagPath}/${workName}/${projectName}/deploy/${projectName}/hivuiLogin
        sed -i 's/<\/head>/'"${source[*]}"'<\/head>/g' index.html
        echo "login已同步！"
    fi
    
    if [ $syncWay = "main" ] ; then
        echo "正在同步main模块..."
        rsync -auz ${tmpPath}/project/hivuiMain ${tagPath}/${workName}/${projectName}/deploy/${projectName}/
        cd ${tagPath}/${workName}/${projectName}/deploy/${projectName}/hivuiMain
        sed -i 's/<\/head>/'"${source[*]}"'<\/head>/g' index.html
        echo "main已同步！"
    fi
    
    if [ $syncWay = "assets" ] ; then
        echo "正在同步assets_platform资源..."
        rsync -auz ${tmpPath}/assets_platform ${tagPath}/${workName}/${projectName}/deploy/
        echo "assets_platform资源已同步！"
    fi

Ignore Space Show notes View build/webpack.base.conf.js
//考虑用，parallel-webpack 并发打包加快打包速度 const path = require('path') const webpack = require('webpack') const VueLoaderPlugin = require('vue-loader/lib/plugin') const TerserPlugin = require("terser-webpack-plugin"); const MiniCssExtractPlugin = require('mini-css-extract-plugin');//本插件基于 webpack v4 的新特性（模块类型）构建，并且需要 webpack 4 才能正常工作。 const CssMinimizerPlugin = require('css-minimizer-webpack-plugin'); const AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin') //运行打包命令的时候就可以看到每个loader 和插件执行耗时 const SpeedMeasurePlugin = require("speed-measure-webpack-plugin"); const utils = require('./utils') const packageConfig = require('../package.json') const vueLoaderConfig = require('./vue-loader.conf') // const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin //读取.evn 对应的文件，写入环境变量 var dotenv = require('dotenv').config({ path: resolve('.env.' + process.env.NODE_ENV) }); var cfg = { ...Object.fromEntries(Object.entries(process.env).filter(([k]) => /^VITE_/.test(k))) } let evnConfig = {} for (let key in cfg) { evnConfig[key] = '"' + cfg[key] + '"' } //路径转换 function resolve(dir) { // console.log(dir,'---------------------------',path.join(__dirname, '..', dir)) return path.join(__dirname, '..', dir) } //语法验证 const createLintingRule = () => ({ test: /\.(js\|vue\|dtvevt)$/, loader: 'eslint-loader', enforce: 'pre', include: [resolve('src'), resolve('test')], options: { formatter: require('eslint-friendly-formatter'), emitWarning: true } }) const useEslint = true; //project 这个目录是暂时命名，当用hivui create 创建时候会根据用户输入确定 const projectName = packageConfig.name == 'hi-vui-template' ? 'project' : packageConfig.name; const smp = new SpeedMeasurePlugin();//smp.wrap smp.wrap( module.exports = { //指定目录，默认的值就是项目的根目录 // context: resolve(projectName), //编译入口 String\|\|Array // entry: '', //没有指定入口文件时，按目录搜索对应的package.json所在的入口 entry() { // 初始化入口配置 const entry = {} // 所有模块的列表 const moduleToBuild = require('./module-conf').getModuleToBuild() \|\| [] // 根据传入的待打包目录名称，构建多入口配置 for (let module of moduleToBuild) { // entry[module] = `${module}/index.js` let name = module.replace(/\//gi, '_'); entry[name] = `${module}/index.js` } return entry }, //输出路径 output: { path: resolve('dist'), filename: 'static/js/[name].js', //指定打包后的资源目录相对于dist 下模块index.html // publicPath: './' publicPath:"/e5" }, //如何寻找模块所对应的文件 resolve: { // 配置省略文件路径后缀名，引入文件的时候可以不用写文件的后缀名 extensions: ['.css', '.less', '.js', '.jsx', '.vue', '.json'], //指定引用别名 alias: { 'vue$': 'vue/dist/vue.esm.js', '@': resolve(projectName), '@main': resolve(projectName + '/hivuiMain'), } }, //排除不打包 externals: { // 'axios':'axios', 'vue': 'Vue', "element-ui": "ELEMENT", // 'vue-router': 'VueRouter', // 'vuex':'Vuex', }, //解析模块的规则 module: { rules: [ // ...(useEslint ? [createLintingRule()] : []), ...(utils.styleLoaders({ sourceMap: false, extract: true, usePostCSS: true })), { test: /\.(vue)$/, loader: 'vue-loader', options: vueLoaderConfig }, { test: /\.(js\|jsx)$/, loader: 'babel-loader', exclude: /node_modules/, options: { cacheDirectory: true } // exclude: [ // /node_modules\/(webpack\|html-webpack-plugin)\//, // ], }, // element amdin src/icons使用 // { // test: /\.svg$/, // loader: 'svg-sprite-loader', // include: [resolve('src/icons')], // options: { // symbolId: 'icon-[name]' // } // }, { test: /\.(png\|jpe?g\|gif\|svg)(\?.)?$/, loader: 'url-loader', options: { limit: 10000, name: 'static/img/[name].[ext]'//.[hash:7] // publicPath:"../img/", //替换CSS引用的图片路径可以替换成爱拍云上的路径 // outputPath:"static/img/" //生成之后存放的路径 } }, { test: /\.(mp4\|webm\|ogg\|mp3\|wav\|flac\|aac)(\?.)?$/, loader: 'url-loader', options: { limit: 10000, name: 'static/media/[name].[ext]'//.[hash:7] // publicPath:"../media/", //替换CSS引用的图片路径可以替换成爱拍云上的路径 // outputPath:"static/media/" //生成之后存放的路径 } }, { test: /\.(woff2?\|eot\|ttf\|otf)(\?.)?$/, loader: 'url-loader', options: { limit: 10000, name: "[name].[ext]",//[hash:8]. publicPath: "../fonts/", //替换CSS引用的图片路径可以替换成爱拍云上的路径 outputPath: "static/fonts/" //生成之后存放的路径 // name: 'static/fonts/[name].[hash:7].[ext]' } } ] }, devtool: "source-map", optimization: { minimizer: [ new CssMinimizerPlugin(), new MiniCssExtractPlugin({ filename: 'static/css/[name].[contenthash:10].css'//.[contenthash] }), new TerserPlugin() ], splitChunks: { chunks: 'all', cacheGroups: { // vue: { // name: 'vue', // test: /[\\/]node_modules[\\/]vue[\\/]/, // priority: -10 // }, // vuex: { // name: 'vuex', // test: /[\\/]node_modules[\\/]vuex[\\/]/, // priority: -10 // }, // 'vue-router': { // name: 'vue-router', // test: /[\\/]node_modules[\\/]vue-router[\\/]/, // priority: -10 // }, // 'element-ui': { // name: 'element-ui', // test: /[\\/]node_modules[\\/]element-ui[\\/]/, // priority: -10 // }, 'module-vendors': { name: 'module-vendors', test: /[\\/]node_modules[\\/]/, priority: -20 } }, } }, plugins: [ //注入全局变量的插件,通常使用该插件来判别代码运行的环境变量 new webpack.DefinePlugin({ 'process.env': evnConfig }), new VueLoaderPlugin(), //预设一些基础库 new webpack.DllReferencePlugin({ context: resolve("assets_platform/vendor_dll"), //告诉webpack哪些库不参与打包，同时使用时名称也得变 manifest:resolve('assets_platform/vendor_dll/vuelibs-manifest.json') }), new webpack.DllReferencePlugin({ context: resolve("assets_platform/vendor_dll"), //告诉webpack哪些库不参与打包，同时使用时名称也得变 manifest:resolve('assets_platform/vendor_dll/vendor-manifest.json') }), // new AddAssetHtmlPlugin({ // filepath: resolve('webpackDll/Vue.js'), // outputPath:'./static/js/', // publicPath:'./static/js/' // }), ], }; //考虑用，parallel-webpack 并发打包加快打包速度 const path = require('path') const webpack = require('webpack') const VueLoaderPlugin = require('vue-loader/lib/plugin') const TerserPlugin = require("terser-webpack-plugin"); const MiniCssExtractPlugin = require('mini-css-extract-plugin');//本插件基于 webpack v4 的新特性（模块类型）构建，并且需要 webpack 4 才能正常工作。 const CssMinimizerPlugin = require('css-minimizer-webpack-plugin'); const AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin') //运行打包命令的时候就可以看到每个loader 和插件执行耗时 const SpeedMeasurePlugin = require("speed-measure-webpack-plugin"); const utils = require('./utils') const packageConfig = require('../package.json') const vueLoaderConfig = require('./vue-loader.conf') // const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin //读取.evn 对应的文件，写入环境变量 var dotenv = require('dotenv').config({ path: resolve('.env.' + process.env.NODE_ENV) }); var cfg = { ...Object.fromEntries(Object.entries(process.env).filter(([k]) => /^VITE_/.test(k))) } let evnConfig = {} for (let key in cfg) { evnConfig[key] = '"' + cfg[key] + '"' } //路径转换 function resolve(dir) { // console.log(dir,'---------------------------',path.join(__dirname, '..', dir)) return path.join(__dirname, '..', dir) } //语法验证 const createLintingRule = () => ({ test: /\.(js\|vue\|dtvevt)$/, loader: 'eslint-loader', enforce: 'pre', include: [resolve('src'), resolve('test')], options: { formatter: require('eslint-friendly-formatter'), emitWarning: true } }) const useEslint = true; //project 这个目录是暂时命名，当用hivui create 创建时候会根据用户输入确定 const projectName = packageConfig.name == 'hi-vui-template' ? 'project' : packageConfig.name; const smp = new SpeedMeasurePlugin();//smp.wrap smp.wrap( module.exports = { //指定目录，默认的值就是项目的根目录 // context: resolve(projectName), //编译入口 String\|\|Array // entry: '', //没有指定入口文件时，按目录搜索对应的package.json所在的入口 entry() { // 初始化入口配置 const entry = {} // 所有模块的列表 const moduleToBuild = require('./module-conf').getModuleToBuild() \|\| [] // 根据传入的待打包目录名称，构建多入口配置 for (let module of moduleToBuild) { // entry[module] = `${module}/index.js` let name = module.replace(/\//gi, '_'); entry[name] = `${module}/index.js` } return entry }, //输出路径 output: { path: resolve('dist'), filename: 'static/js/[name].js', //指定打包后的资源目录相对于dist 下模块index.html publicPath: './' }, //如何寻找模块所对应的文件 resolve: { // 配置省略文件路径后缀名，引入文件的时候可以不用写文件的后缀名 extensions: ['.css', '.less', '.js', '.jsx', '.vue', '.json'], //指定引用别名 alias: { 'vue$': 'vue/dist/vue.esm.js', '@': resolve(projectName), '@main': resolve(projectName + '/hivuiMain'), } }, //排除不打包 externals: { // 'axios':'axios', 'vue': 'Vue', "element-ui": "ELEMENT", // 'vue-router': 'VueRouter', // 'vuex':'Vuex', }, //解析模块的规则 module: { rules: [ // ...(useEslint ? [createLintingRule()] : []), ...(utils.styleLoaders({ sourceMap: false, extract: true, usePostCSS: true })), { test: /\.(vue)$/, loader: 'vue-loader', options: vueLoaderConfig }, { test: /\.(js\|jsx)$/, loader: 'babel-loader', exclude: /node_modules/, options: { cacheDirectory: true } // exclude: [ // /node_modules\/(webpack\|html-webpack-plugin)\//, // ], }, // element amdin src/icons使用 // { // test: /\.svg$/, // loader: 'svg-sprite-loader', // include: [resolve('src/icons')], // options: { // symbolId: 'icon-[name]' // } // }, { test: /\.(png\|jpe?g\|gif\|svg)(\?.)?$/, loader: 'url-loader', options: { limit: 10000, name: 'static/img/[name].[ext]'//.[hash:7] // publicPath:"../img/", //替换CSS引用的图片路径可以替换成爱拍云上的路径 // outputPath:"static/img/" //生成之后存放的路径 } }, { test: /\.(mp4\|webm\|ogg\|mp3\|wav\|flac\|aac)(\?.)?$/, loader: 'url-loader', options: { limit: 10000, name: 'static/media/[name].[ext]'//.[hash:7] // publicPath:"../media/", //替换CSS引用的图片路径可以替换成爱拍云上的路径 // outputPath:"static/media/" //生成之后存放的路径 } }, { test: /\.(woff2?\|eot\|ttf\|otf)(\?.)?$/, loader: 'url-loader', options: { limit: 10000, name: "[name].[ext]",//[hash:8]. publicPath: "../fonts/", //替换CSS引用的图片路径可以替换成爱拍云上的路径 outputPath: "static/fonts/" //生成之后存放的路径 // name: 'static/fonts/[name].[hash:7].[ext]' } } ] }, devtool: "source-map", optimization: { minimizer: [ new CssMinimizerPlugin(), new MiniCssExtractPlugin({ filename: 'static/css/[name].[contenthash:10].css'//.[contenthash] }), new TerserPlugin() ], splitChunks: { chunks: 'all', cacheGroups: { // vue: { // name: 'vue', // test: /[\\/]node_modules[\\/]vue[\\/]/, // priority: -10 // }, // vuex: { // name: 'vuex', // test: /[\\/]node_modules[\\/]vuex[\\/]/, // priority: -10 // }, // 'vue-router': { // name: 'vue-router', // test: /[\\/]node_modules[\\/]vue-router[\\/]/, // priority: -10 // }, // 'element-ui': { // name: 'element-ui', // test: /[\\/]node_modules[\\/]element-ui[\\/]/, // priority: -10 // }, 'module-vendors': { name: 'module-vendors', test: /[\\/]node_modules[\\/]/, priority: -20 } }, } }, plugins: [ //注入全局变量的插件,通常使用该插件来判别代码运行的环境变量 new webpack.DefinePlugin({ 'process.env': evnConfig }), new VueLoaderPlugin(), //预设一些基础库 new webpack.DllReferencePlugin({ context: resolve("assets_platform/vendor_dll"), //告诉webpack哪些库不参与打包，同时使用时名称也得变 manifest:resolve('assets_platform/vendor_dll/vuelibs-manifest.json') }), new webpack.DllReferencePlugin({ context: resolve("assets_platform/vendor_dll"), //告诉webpack哪些库不参与打包，同时使用时名称也得变 manifest:resolve('assets_platform/vendor_dll/vendor-manifest.json') }), // new AddAssetHtmlPlugin({ // filepath: resolve('webpackDll/Vue.js'), // outputPath:'./static/js/', // publicPath:'./static/js/' // }), ], };

Ignore Space Show notes View

build/webpack.base.conf.js

//考虑用，parallel-webpack  并发打包加快打包速度
const path = require('path')
const webpack = require('webpack')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const TerserPlugin = require("terser-webpack-plugin");
const MiniCssExtractPlugin = require('mini-css-extract-plugin');//本插件基于 webpack v4 的新特性（模块类型）构建，并且需要 webpack 4 才能正常工作。
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');
const AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin')

//运行打包命令的时候就可以看到每个loader 和插件执行耗时
const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");

const utils = require('./utils')
const packageConfig = require('../package.json')
const vueLoaderConfig = require('./vue-loader.conf')
// const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin

//读取.evn 对应的文件，写入环境变量
var dotenv = require('dotenv').config({ path: resolve('.env.' + process.env.NODE_ENV) });
var cfg = { ...Object.fromEntries(Object.entries(process.env).filter(([k]) => /^VITE_/.test(k))) }
let evnConfig = {}
for (let key in cfg) {
    evnConfig[key] = '"' + cfg[key] + '"'
}

//路径转换
function resolve(dir) {
    // console.log(dir,'---------------------------',path.join(__dirname, '..', dir))
    return path.join(__dirname, '..', dir)
}

//语法验证
const createLintingRule = () => ({
    test: /\.(js|vue|dtvevt)$/,
    loader: 'eslint-loader',
    enforce: 'pre',
    include: [resolve('src'), resolve('test')],
    options: {
        formatter: require('eslint-friendly-formatter'),
        emitWarning: true
    }
})

const useEslint = true;
//project 这个目录是暂时命名，当用hivui create 创建时候 会根据用户输入确定
const projectName = packageConfig.name == 'hi-vui-template' ? 'project' : packageConfig.name;

const smp = new SpeedMeasurePlugin();//smp.wrap smp.wrap(
module.exports = {
    //指定目录，默认的值就是项目的根目录
    // context: resolve(projectName),
    //编译入口 String||Array
    // entry: '',
    //没有指定入口文件时，按目录搜索 对应的package.json所在的入口
    entry() {
        // 初始化入口配置
        const entry = {}
        // 所有模块的列表
        const moduleToBuild = require('./module-conf').getModuleToBuild() || []
        // 根据传入的待打包目录名称，构建多入口配置
        for (let module of moduleToBuild) {
            // entry[module] = `${module}/index.js`
            let name = module.replace(/\//gi, '_');
            entry[name] = `${module}/index.js`
        }
        return entry
    },
    //输出路径 
    output: {
        path: resolve('dist'),
        filename: 'static/js/[name].js',
        //指定打包后的资源目录 相对于dist 下 模块index.html
        // publicPath: './'
        publicPath:"/e5"
    },
    //如何寻找模块所对应的文件
    resolve: {
        // 配置省略文件路径后缀名，引入文件的时候可以不用写文件的后缀名
        extensions: ['.css', '.less', '.js', '.jsx', '.vue', '.json'],
        //指定引用别名
        alias: {
            'vue$': 'vue/dist/vue.esm.js',
            '@': resolve(projectName),
            '@main': resolve(projectName + '/hivuiMain'),
        }
    },
    //排除不打包
    externals: {
        // 'axios':'axios',
        'vue': 'Vue',
        "element-ui": "ELEMENT",
        // 'vue-router': 'VueRouter',
        // 'vuex':'Vuex',      
    },
    //解析模块的规则
    module: {
        rules: [

// ...(useEslint ? [createLintingRule()] : []),
            ...(utils.styleLoaders({
                sourceMap: false,
                extract: true,
                usePostCSS: true
            })),
            {
                test: /\.(vue)$/,
                loader: 'vue-loader',
                options: vueLoaderConfig
            },
            {
                test: /\.(js|jsx)$/,
                loader: 'babel-loader',
                exclude: /node_modules/,
                options: {
                    cacheDirectory: true
                }
                // exclude: [
                //     /node_modules\/(webpack|html-webpack-plugin)\//,
                // ],
            },
            // element amdin src/icons使用
            // {
            //     test: /\.svg$/,
            //     loader: 'svg-sprite-loader',
            //     include: [resolve('src/icons')],
            //     options: {
            //         symbolId: 'icon-[name]'
            //     }
            // },
            {
                test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
                loader: 'url-loader',
                options: {
                    limit: 10000,
                    name: 'static/img/[name].[ext]'//.[hash:7]
                    // publicPath:"../img/",	//替换CSS引用的图片路径 可以替换成爱拍云上的路径
                    // outputPath:"static/img/"		//生成之后存放的路径
                }
            },
            {
                test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
                loader: 'url-loader',
                options: {
                    limit: 10000,
                    name: 'static/media/[name].[ext]'//.[hash:7]
                    // publicPath:"../media/",	//替换CSS引用的图片路径 可以替换成爱拍云上的路径
                    // outputPath:"static/media/"		//生成之后存放的路径
                }
            },
            {
                test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
                loader: 'url-loader',
                options: {
                    limit: 10000,
                    name: "[name].[ext]",//[hash:8].
                    publicPath: "../fonts/",	//替换CSS引用的图片路径 可以替换成爱拍云上的路径
                    outputPath: "static/fonts/"		//生成之后存放的路径
                    // name: 'static/fonts/[name].[hash:7].[ext]'
                }
            }
        ]
    },
    devtool: "source-map",
    optimization: {
        minimizer: [
            new CssMinimizerPlugin(),
            new MiniCssExtractPlugin({
                filename: 'static/css/[name].[contenthash:10].css'//.[contenthash]
            }),
            new TerserPlugin()
        ],
        splitChunks: {
            chunks: 'all',
            cacheGroups: {
                // vue: {
                //     name: 'vue',
                //     test: /[\\/]node_modules[\\/]vue[\\/]/,
                //     priority: -10
                // },
                // vuex: {
                //     name: 'vuex',
                //     test: /[\\/]node_modules[\\/]vuex[\\/]/,
                //     priority: -10
                // },
                // 'vue-router': {
                //     name: 'vue-router',
                //     test: /[\\/]node_modules[\\/]vue-router[\\/]/,
                //     priority: -10
                // },
                // 'element-ui': {
                //     name: 'element-ui',
                //     test: /[\\/]node_modules[\\/]element-ui[\\/]/,
                //     priority: -10
                // },
                'module-vendors': {
                    name: 'module-vendors',
                    test: /[\\/]node_modules[\\/]/,
                    priority: -20
                }
            },
        }
    },
    plugins: [
        //注入全局变量的插件,通常使用该插件来判别代码运行的环境变量
        new webpack.DefinePlugin({
            'process.env': evnConfig
        }),
        new VueLoaderPlugin(),
        //预设一些基础库
        new webpack.DllReferencePlugin({
            context: resolve("assets_platform/vendor_dll"),
            //告诉webpack哪些库不参与打包，同时使用时名称也得变
            manifest:resolve('assets_platform/vendor_dll/vuelibs-manifest.json')
        }),
        new webpack.DllReferencePlugin({
            context: resolve("assets_platform/vendor_dll"),
            //告诉webpack哪些库不参与打包，同时使用时名称也得变
            manifest:resolve('assets_platform/vendor_dll/vendor-manifest.json')
        }),
        // new AddAssetHtmlPlugin({
        //     filepath: resolve('webpackDll/Vue.js'),
        //     outputPath:'./static/js/',
        //     publicPath:'./static/js/'
        // }),
    ],
};

//运行打包命令的时候就可以看到每个loader 和插件执行耗时
const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");

//路径转换
function resolve(dir) {
    // console.log(dir,'---------------------------',path.join(__dirname, '..', dir))
    return path.join(__dirname, '..', dir)
}

const smp = new SpeedMeasurePlugin();//smp.wrap smp.wrap(
module.exports = {
    //指定目录，默认的值就是项目的根目录
    // context: resolve(projectName),
    //编译入口 String||Array
    // entry: '',
    //没有指定入口文件时，按目录搜索 对应的package.json所在的入口
    entry() {
        // 初始化入口配置
        const entry = {}
        // 所有模块的列表
        const moduleToBuild = require('./module-conf').getModuleToBuild() || []
        // 根据传入的待打包目录名称，构建多入口配置
        for (let module of moduleToBuild) {
            // entry[module] = `${module}/index.js`
            let name = module.replace(/\//gi, '_');
            entry[name] = `${module}/index.js`
        }
        return entry
    },
    //输出路径 
    output: {
        path: resolve('dist'),
        filename: 'static/js/[name].js',
        //指定打包后的资源目录 相对于dist 下 模块index.html
        publicPath: './'
    },
    //如何寻找模块所对应的文件
    resolve: {
        // 配置省略文件路径后缀名，引入文件的时候可以不用写文件的后缀名
        extensions: ['.css', '.less', '.js', '.jsx', '.vue', '.json'],
        //指定引用别名
        alias: {
            'vue$': 'vue/dist/vue.esm.js',
            '@': resolve(projectName),
            '@main': resolve(projectName + '/hivuiMain'),
        }
    },
    //排除不打包
    externals: {
        // 'axios':'axios',
        'vue': 'Vue',
        "element-ui": "ELEMENT",
        // 'vue-router': 'VueRouter',
        // 'vuex':'Vuex',      
    },
    //解析模块的规则
    module: {
        rules: [

Show line notes below