【======编译问题 ======】可能 parallel-webpack cpu太多可能 happypack cpu太多目前把 parallel-webpack 降到 1 cpu 结果可以跑的动

08335 / hivui-platform-template

hivui平台项目模板

Browse code 【======编译问题 ======】可能 parallel-webpack cpu太多可能 happypack cpu太多目前把 parallel-webpack 降到 1 cpu 结果可以跑的动 master
1 parent 45919f7 commit 715b917235530127978d90f0ecd94e45a086c465 caibinghong authored on 18 Jan 2022

Showing 3 changed files

Ignore Space Show notes View build/doc.txt
node webpack 多config 编译执行 https://cloud.tencent.com/developer/section/1477277 parallel-webpack 多config 并行执行编译，这样提高速度 192.168.4.194 项目文件：/filesdisk2/eap5/web/workspace/project/deploy /filesdisk2/eap5/studio/workspace/project/deploy/ 192.168.4.193 项目文件： /opt/eap5/desktop/preview/ deploy最终的项目部署目录 http://192.168.4.194:3000/project/01521/mokuai/shitu/abc/dtv/1.0.0/index.html 让npm run dev在Linux后台持久运行 nohup npm run dev >/dev/null 2>&1 & exit 杀端口进程 netstat -apn\|grep 3000 kill -9 18164 下面几个版本组合（有些版本没有列出来）。 npm install -g node-gyp https://github.com/webpack-contrib/sass-loader/blob/v6.0.7/package.json node-sass 对环境的要求 Node 12 的话要 node-sass 4.12+ 然页sass-loader 版本8的，配对 node-sass版本4 npm i sass-loader@8.0.2 node-sass@4.13.0 -D npm rebuild node-sass npm i less@4.1.1 less-loader@3.0.0 -D npm cache clean -f rimraf node_modules npm shrinkwrap // npm-shrinkwrap.json 锁定包版本环境 1：npm install webpack -g 2: npm install webpack-cli -g 3: npm init -y 4: npm install webpack --save-dev 5: npm install html-webpack-plugin （html编译插件） 6：npm install clean-webpack-plugin 6.1: npm install webpack-dev-server (服务插件) 6.2: npm install style-loader css-loader （css打包插件） 6.3: npm install file-loader url-loader (文件图片打包插件) 6.4: npm install less-loader (less打包插件) 6.5: npm install sass scss --save-dev （sass scss打包插件） 6.6: npm install sass-loader nade-sass (sass打包插件) 7新建一个src文件夹和 less文件夹和webpack.config.js //以element 方式打包各各组件，做为按需导出使用 ElementUI/babel-plugin-component .babelrc "plugins": ["transform-vue-jsx", "transform-runtime", [ "component", { "libraryName": "hi-ui", "style":false } ]], vue2 使用 vite 所需求的步骤： 1、相关包安装 npm i '@vitejs/plugin-vue' '@vue/compiler-sfc' vite vite-plugin-vue2 -D 2、添加vite.confing.js import { createVuePlugin } from "vite-plugin-vue2"; 在配置项中，转vue plugins: [createVuePlugin()], 3、修改vite/dist/client/client.js case 'error': //判断当前出错的页面 let locPath = location.pathname.split('/'); locPath.pop(); if(err.id.indexOf(locPath.join('/'))==-1)break; case 'update': return;//让用户手动去刷新 08335 case 'full-reload': return;//让用户手动去刷新 08335 报类似这样的错误： Current process list running is not in sync with saved list. App BookStack differs. Type ‘pm2 save’ to synchronize. 按先后顺序，执行如下操作： pm2 update pm2 save pm2 list npm i vite@2.3.7 --save-dev //fonticon这个版本才可以有图标显示 webpack5 https://blog.csdn.net/j178202798/category_11141799.html npm run build:debug ./project/zhuomianduanyanshi/biaozhundanju/view/biaodan/dtv/1.0.0 webpack 2 vite https://github.com/tnfe/wp2vite/blob/master/README.zh-CN.md 自动化构建工具（三）Parcel https://blog.csdn.net/weixin_42580704/article/details/108378689 https://www.parceljs.cn/getting_started.html /eap5.0/hiruntime/project/desktop/oper.sh admin eap5csxm sync cli /eap5.0/hiruntime/project/desktop/project-template/build/bin/oper.sh cp -rf /eap5.0/hiruntime/project/desktop/project-template/build/bin/oper.sh /eap5.0/hiruntime/project/desktop/ chmod -R 777 /eap5.0/hiruntime/project/desktop /eap5.0/hiruntime/project/hicli.sh 项目类型用户名项目操作如：项目类型用户名项目名创建操作桌面端口 app端口小程序端口 eap5 0000227 eapProject create 2022 2023 2024 如：项目类型用户名项目名删除操作 eap5 0000227 eapProject delete 如：项目类型用户名项目名同步操作平台同步方式 eap5 0000227 eapProject sync desktop hiui eap5 0000227 eapProject sync rn eap5 0000227 eapProject sync xcx 如：项目类型用户名项目名重启操作平台端口 eap5 0000227 eapProject restart desktop eap5 0000227 eapProject restart rn 2025 eap5 0000227 eapProject restart xcx 2026 ================linux 命令============================= /usr/local/nginx/sbin pm2 startup 端口查看进程 lsof -i :8081 杀端口进程 netstat -apn\|grep 3000 kill -9 18164 lsof -i :38889 free -m 查看内存查看用户进程的内存使用情况 ps auxw\|head -1;ps auxw\|sort -rn -k3\|head -10 杀webpack 进程 ps -ef\|grep webpack\|grep -v grep\|cut -c 9-15\|xargs kill -9 使用指令sed -i 's/\r$//' xxxxxxx.sh，上面的指令会把 xxxxxxx.sh 中的\r 替换成空白！【======编译问题 ======】可能 parallel-webpack cpu太多可能 happypack cpu太多目前把 parallel-webpack 降到 1 cpu 结果可以跑的动 node webpack 多config 编译执行 https://cloud.tencent.com/developer/section/1477277 parallel-webpack 多config 并行执行编译，这样提高速度 192.168.4.194 项目文件：/filesdisk2/eap5/web/workspace/project/deploy /filesdisk2/eap5/studio/workspace/project/deploy/ 192.168.4.193 项目文件： /opt/eap5/desktop/preview/ deploy最终的项目部署目录 http://192.168.4.194:3000/project/01521/mokuai/shitu/abc/dtv/1.0.0/index.html 让npm run dev在Linux后台持久运行 nohup npm run dev >/dev/null 2>&1 & exit 杀端口进程 netstat -apn\|grep 3000 kill -9 18164 下面几个版本组合（有些版本没有列出来）。 npm install -g node-gyp https://github.com/webpack-contrib/sass-loader/blob/v6.0.7/package.json node-sass 对环境的要求 Node 12 的话要 node-sass 4.12+ 然页sass-loader 版本8的，配对 node-sass版本4 npm i sass-loader@8.0.2 node-sass@4.13.0 -D npm rebuild node-sass npm i less@4.1.1 less-loader@3.0.0 -D npm cache clean -f rimraf node_modules npm shrinkwrap // npm-shrinkwrap.json 锁定包版本环境 1：npm install webpack -g 2: npm install webpack-cli -g 3: npm init -y 4: npm install webpack --save-dev 5: npm install html-webpack-plugin （html编译插件） 6：npm install clean-webpack-plugin 6.1: npm install webpack-dev-server (服务插件) 6.2: npm install style-loader css-loader （css打包插件） 6.3: npm install file-loader url-loader (文件图片打包插件) 6.4: npm install less-loader (less打包插件) 6.5: npm install sass scss --save-dev （sass scss打包插件） 6.6: npm install sass-loader nade-sass (sass打包插件) 7新建一个src文件夹和 less文件夹和webpack.config.js //以element 方式打包各各组件，做为按需导出使用 ElementUI/babel-plugin-component .babelrc "plugins": ["transform-vue-jsx", "transform-runtime", [ "component", { "libraryName": "hi-ui", "style":false } ]], vue2 使用 vite 所需求的步骤： 1、相关包安装 npm i '@vitejs/plugin-vue' '@vue/compiler-sfc' vite vite-plugin-vue2 -D 2、添加vite.confing.js import { createVuePlugin } from "vite-plugin-vue2"; 在配置项中，转vue plugins: [createVuePlugin()], 3、修改vite/dist/client/client.js case 'error': //判断当前出错的页面 let locPath = location.pathname.split('/'); locPath.pop(); if(err.id.indexOf(locPath.join('/'))==-1)break; case 'update': return;//让用户手动去刷新 08335 case 'full-reload': return;//让用户手动去刷新 08335 报类似这样的错误： Current process list running is not in sync with saved list. App BookStack differs. Type ‘pm2 save’ to synchronize. 按先后顺序，执行如下操作： pm2 update pm2 save pm2 list npm i vite@2.3.7 --save-dev //fonticon这个版本才可以有图标显示 webpack5 https://blog.csdn.net/j178202798/category_11141799.html npm run build:debug ./project/zhuomianduanyanshi/biaozhundanju/view/biaodan/dtv/1.0.0 webpack 2 vite https://github.com/tnfe/wp2vite/blob/master/README.zh-CN.md 自动化构建工具（三）Parcel https://blog.csdn.net/weixin_42580704/article/details/108378689 https://www.parceljs.cn/getting_started.html /eap5.0/hiruntime/project/desktop/oper.sh admin eap5csxm sync cli /eap5.0/hiruntime/project/desktop/project-template/build/bin/oper.sh cp -rf /eap5.0/hiruntime/project/desktop/project-template/build/bin/oper.sh /eap5.0/hiruntime/project/desktop/ chmod -R 777 /eap5.0/hiruntime/project/desktop /eap5.0/hiruntime/project/hicli.sh 项目类型用户名项目操作如：项目类型用户名项目名创建操作桌面端口 app端口小程序端口 eap5 0000227 eapProject create 2022 2023 2024 如：项目类型用户名项目名删除操作 eap5 0000227 eapProject delete 如：项目类型用户名项目名同步操作平台同步方式 eap5 0000227 eapProject sync desktop hiui eap5 0000227 eapProject sync rn eap5 0000227 eapProject sync xcx 如：项目类型用户名项目名重启操作平台端口 eap5 0000227 eapProject restart desktop eap5 0000227 eapProject restart rn 2025 eap5 0000227 eapProject restart xcx 2026 ================linux 命令============================= /usr/local/nginx/sbin pm2 startup 端口查看进程 lsof -i :8081 杀端口进程 netstat -apn\|grep 3000 kill -9 18164 lsof -i :38889 free -m 查看内存查看用户进程的内存使用情况 ps auxw\|head -1;ps auxw\|sort -rn -k3\|head -10 使用指令sed -i 's/\r$//' xxxxxxx.sh，上面的指令会把 xxxxxxx.sh 中的\r 替换成空白！

Ignore Space Show notes View

build/doc.txt

node webpack 多config 编译执行
https://cloud.tencent.com/developer/section/1477277
parallel-webpack 多config 并行执行编译，这样提高速度

192.168.4.194
项目文件：/filesdisk2/eap5/web/workspace/project/deploy
        /filesdisk2/eap5/studio/workspace/project/deploy/
        
192.168.4.193
项目文件：
/opt/eap5/desktop/preview/

deploy最终的项目部署目录
http://192.168.4.194:3000/project/01521/mokuai/shitu/abc/dtv/1.0.0/index.html

让npm run dev在Linux后台 持久运行
nohup npm run dev >/dev/null 2>&1 &
exit
杀端口进程
netstat -apn|grep 3000
kill -9 18164

下面几个版本组合（有些版本没有列出来）。

npm install -g node-gyp
https://github.com/webpack-contrib/sass-loader/blob/v6.0.7/package.json

node-sass 对环境的要求 Node 12 的话要 node-sass 4.12+
然页sass-loader 版本8的， 配对 node-sass版本4 
npm i sass-loader@8.0.2 node-sass@4.13.0 -D

npm rebuild node-sass

npm i less@4.1.1 less-loader@3.0.0 -D
npm cache clean -f

rimraf node_modules
npm shrinkwrap  // npm-shrinkwrap.json 锁定包版本环境

1：npm install webpack -g

2: npm install webpack-cli -g

3: npm init -y

4: npm install webpack --save-dev

5: npm install html-webpack-plugin    （html编译插件）

6：npm install clean-webpack-plugin

6.1: npm install webpack-dev-server   (服务插件)

6.2: npm install style-loader css-loader  （css打包插件）

6.3: npm install file-loader url-loader    (文件图片打包插件)

6.4: npm install less-loader    (less打包插件)

6.5: npm install sass scss --save-dev       （sass scss打包插件）

6.6: npm install sass-loader nade-sass      (sass打包插件)

7新建一个src文件夹  和  less文件夹       和webpack.config.js

//以element 方式打包各各组件，做为按需导出使用 ElementUI/babel-plugin-component
.babelrc
"plugins": ["transform-vue-jsx", "transform-runtime", [
    "component",
    {
        "libraryName": "hi-ui",
        "style":false
    }
]],

vue2 使用 vite 所需求的步骤：

1、相关包安装
npm i '@vitejs/plugin-vue' '@vue/compiler-sfc' vite vite-plugin-vue2 -D

2、添加vite.confing.js
import { createVuePlugin } from "vite-plugin-vue2";
在配置项中，转vue
plugins: [createVuePlugin()],

3、修改vite/dist/client/client.js

case 'error': 
    //判断当前出错的页面
    let locPath = location.pathname.split('/');
    locPath.pop();            
    if(err.id.indexOf(locPath.join('/'))==-1)break;

case 'update': 
        return;//让用户手动去刷新 08335
    case 'full-reload':
        return;//让用户手动去刷新 08335

报类似这样的错误： Current process list running is not in sync with saved list. App BookStack differs. Type ‘pm2 save’ to synchronize.

按先后顺序，执行如下操作：

pm2 update
pm2 save
pm2 list

npm i vite@2.3.7 --save-dev //fonticon这个版本才可以有图标显示
webpack5
https://blog.csdn.net/j178202798/category_11141799.html

npm run build:debug ./project/zhuomianduanyanshi/biaozhundanju/view/biaodan/dtv/1.0.0

webpack 2 vite
 https://github.com/tnfe/wp2vite/blob/master/README.zh-CN.md

自动化构建工具（三）Parcel
 https://blog.csdn.net/weixin_42580704/article/details/108378689
 https://www.parceljs.cn/getting_started.html

/eap5.0/hiruntime/project/desktop/oper.sh admin eap5csxm sync cli

/eap5.0/hiruntime/project/desktop/project-template/build/bin/oper.sh

cp -rf /eap5.0/hiruntime/project/desktop/project-template/build/bin/oper.sh /eap5.0/hiruntime/project/desktop/

chmod -R 777 /eap5.0/hiruntime/project/desktop

/eap5.0/hiruntime/project/hicli.sh 项目类型   用户名   项目    操作

如：项目类型   用户名   项目名   创建操作  桌面端口   app端口   小程序端口    
eap5  0000227  eapProject  create    2022   2023   2024

如：项目类型   用户名  项目名   删除操作 
eap5  0000227  eapProject  delete

如：项目类型   用户名   项目名  同步操作  平台   同步方式
eap5  0000227   eapProject   sync   desktop   hiui
eap5  0000227   eapProject   sync  rn 
eap5  0000227   eapProject   sync  xcx

如：项目类型   用户名   项目名   重启操作   平台    端口
eap5  0000227   eapProject  restart    desktop
eap5  0000227   eapProject  restart    rn     2025
eap5  0000227   eapProject  restart    xcx    2026

================linux 命令=============================
/usr/local/nginx/sbin

pm2 startup

端口查看进程 lsof -i :8081

杀端口进程
netstat -apn|grep 3000
kill -9 18164

lsof -i :38889

free -m   查看内存

查看用户进程的内存使用情况
ps auxw|head -1;ps auxw|sort -rn -k3|head -10

杀webpack 进程
ps -ef|grep webpack|grep -v grep|cut -c 9-15|xargs kill -9

使用指令sed -i 's/\r$//' xxxxxxx.sh，上面的指令会把 xxxxxxx.sh 中的\r 替换成空白！

【======编译问题 ======】
可能 parallel-webpack  cpu太多 
可能  happypack  cpu太多
目前把  parallel-webpack 降到 1 cpu  结果可以跑的动

node webpack 多config 编译执行
https://cloud.tencent.com/developer/section/1477277
parallel-webpack 多config 并行执行编译，这样提高速度

192.168.4.194
项目文件：/filesdisk2/eap5/web/workspace/project/deploy
        /filesdisk2/eap5/studio/workspace/project/deploy/
        
192.168.4.193
项目文件：
/opt/eap5/desktop/preview/

deploy最终的项目部署目录
http://192.168.4.194:3000/project/01521/mokuai/shitu/abc/dtv/1.0.0/index.html

让npm run dev在Linux后台 持久运行
nohup npm run dev >/dev/null 2>&1 &
exit
杀端口进程
netstat -apn|grep 3000
kill -9 18164

下面几个版本组合（有些版本没有列出来）。

npm install -g node-gyp
https://github.com/webpack-contrib/sass-loader/blob/v6.0.7/package.json

node-sass 对环境的要求 Node 12 的话要 node-sass 4.12+
然页sass-loader 版本8的， 配对 node-sass版本4 
npm i sass-loader@8.0.2 node-sass@4.13.0 -D

npm rebuild node-sass

npm i less@4.1.1 less-loader@3.0.0 -D
npm cache clean -f

rimraf node_modules
npm shrinkwrap  // npm-shrinkwrap.json 锁定包版本环境

1：npm install webpack -g

2: npm install webpack-cli -g

3: npm init -y

4: npm install webpack --save-dev

5: npm install html-webpack-plugin    （html编译插件）

6：npm install clean-webpack-plugin

6.1: npm install webpack-dev-server   (服务插件)

6.2: npm install style-loader css-loader  （css打包插件）

6.3: npm install file-loader url-loader    (文件图片打包插件)

6.4: npm install less-loader    (less打包插件)

6.5: npm install sass scss --save-dev       （sass scss打包插件）

6.6: npm install sass-loader nade-sass      (sass打包插件)

7新建一个src文件夹  和  less文件夹       和webpack.config.js

vue2 使用 vite 所需求的步骤：

1、相关包安装
npm i '@vitejs/plugin-vue' '@vue/compiler-sfc' vite vite-plugin-vue2 -D

2、添加vite.confing.js
import { createVuePlugin } from "vite-plugin-vue2";
在配置项中，转vue
plugins: [createVuePlugin()],

3、修改vite/dist/client/client.js

case 'error': 
    //判断当前出错的页面
    let locPath = location.pathname.split('/');
    locPath.pop();            
    if(err.id.indexOf(locPath.join('/'))==-1)break;

case 'update': 
        return;//让用户手动去刷新 08335
    case 'full-reload':
        return;//让用户手动去刷新 08335

报类似这样的错误： Current process list running is not in sync with saved list. App BookStack differs. Type ‘pm2 save’ to synchronize.

按先后顺序，执行如下操作：

pm2 update
pm2 save
pm2 list

npm i vite@2.3.7 --save-dev //fonticon这个版本才可以有图标显示
webpack5
https://blog.csdn.net/j178202798/category_11141799.html

npm run build:debug ./project/zhuomianduanyanshi/biaozhundanju/view/biaodan/dtv/1.0.0

webpack 2 vite
 https://github.com/tnfe/wp2vite/blob/master/README.zh-CN.md

自动化构建工具（三）Parcel
 https://blog.csdn.net/weixin_42580704/article/details/108378689
 https://www.parceljs.cn/getting_started.html

/eap5.0/hiruntime/project/desktop/oper.sh admin eap5csxm sync cli

/eap5.0/hiruntime/project/desktop/project-template/build/bin/oper.sh

cp -rf /eap5.0/hiruntime/project/desktop/project-template/build/bin/oper.sh /eap5.0/hiruntime/project/desktop/

chmod -R 777 /eap5.0/hiruntime/project/desktop

/eap5.0/hiruntime/project/hicli.sh 项目类型   用户名   项目    操作

如：项目类型   用户名   项目名   创建操作  桌面端口   app端口   小程序端口    
eap5  0000227  eapProject  create    2022   2023   2024

如：项目类型   用户名  项目名   删除操作 
eap5  0000227  eapProject  delete

================linux 命令=============================
/usr/local/nginx/sbin

pm2 startup

端口查看进程 lsof -i :8081

杀端口进程
netstat -apn|grep 3000
kill -9 18164

lsof -i :38889

free -m   查看内存

查看用户进程的内存使用情况
ps auxw|head -1;ps auxw|sort -rn -k3|head -10

使用指令sed -i 's/\r$//' xxxxxxx.sh，上面的指令会把 xxxxxxx.sh 中的\r 替换成空白！

Ignore Space Show notes View build/webpack.base.conf.js
const path = require('path'); var HtmlWebpackPlugin = require('html-webpack-plugin'); const AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin');//------------ const CleanWebpackPlugin = require('clean-webpack-plugin'); const VueLoaderPlugin = require('vue-loader/lib/plugin'); const CopyWebpackPlugin = require('copy-webpack-plugin'); const ProgressBarPlugin = require('progress-bar-webpack-plugin'); const UglifyJsPlugin = require("uglifyjs-webpack-plugin"); const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin"); const webpack = require('webpack'); const packageConfig = require('../package.json'); const utils = require('./utils') const vueLoaderConfig = require('./vue-loader.conf') let evnConfig = require('./getEnvVar') // HappyPack // 原理：每次 webapck 解析一个模块时，HappyPack 会将它及它的依赖分配到worker线程中。 // 提示：由于HappyPack 对file-loader、url-loader 支持的不友好，所以不建议对该loader使用。 // 引入 Happpack 可以在 package.json 找到你下载的 const HappyPack = require('happypack'); // 安装 OS 模块这个主要是拿到当前电脑的CPU核数 const os = require('os'); /* 这个是设置共享线程池中的数量 size 控制设置数量类型只能是整数类型 / const cpus = os.cpus().length; const happyThreadPool = HappyPack.ThreadPool({ size: cpus-1>1?cpus-1:1 });//os.cpus().length 不能开最大 module.exports = { // entry: { // 'login': ['babel-polyfill', './project/hivuiLogin/index.js'], // 'main': ['babel-polyfill','./project/hivuiMain/index.js'] // }, // output: { // filename: '[name].[contenthash].js', // chunkFilename: '[name].[contenthash].js', // path: path.resolve(__dirname, 'dist') // }, resolve: { extensions: ['.js', '.jsx', '.vue', '.json', '.dtvevt'], alias: { 'vue$': 'vue/dist/vue.esm.js', 'vuex$': 'vuex/dist/vuex.esm.js', '@': path.resolve(__dirname, `${packageConfig.name}`), '@main': path.resolve(__dirname, `../${packageConfig.name}/hivuiMain`), // '@': path.resolve(__dirname, 'src'), } }, externals: { 'vue': 'Vue', 'vuex': 'Vuex', 'vue-router': 'VueRouter', "element-ui": "ELEMENT", }, module: { rules: [ ...(utils.styleLoaders({ sourceMap: false, extract: process.env.NODE_ENV === 'production', usePostCSS: true })), { test: /\.(js\|jsx\|dtvevt?\|babel\|es6)$/, loader: 'happypack/loader?id=happy_js_jsx', // loader: 'babel-loader', // exclude: [path.resolve(__dirname, 'node_modules')]//放开，里头有些也是可选链操作符 }, { test: /\.(vue)$/, // loader: 'happypack/loader?id=happy-vue-loader' ???不行，Make sure the rule matching .vue files include vue-loader in its use. loader: 'vue-loader', options: vueLoaderConfig }, { test: /\.(png\|jpe?g\|gif\|svg)(\?.)?$/, loader: 'url-loader', options: { limit: 10000, name: '[name].[hash:7].[ext]', publicPath: "../img/", //替换CSS引用的图片路径可以替换成爱拍云上的路径 outputPath: "static/img/" //生成之后存放的路径 } }, { test: /\.(mp4\|webm\|ogg\|mp3\|wav\|flac\|aac)(\?.)?$/, loader: 'url-loader', options: { limit: 10000, name: '[name].[hash:7].[ext]', publicPath: "../img/", //替换CSS引用的图片路径可以替换成爱拍云上的路径 outputPath: "static/media/" //生成之后存放的路径 } }, { test: /\.(woff2?\|eot\|ttf\|otf)(\?.)?$/, loader: 'url-loader', options: { limit: 10000, name: '[name].[hash:7].[ext]', publicPath: "../fonts/", //替换CSS引用的图片路径可以替换成爱拍云上的路径 outputPath: "static/fonts/" //生成之后存放的路径 } } ] }, optimization: { minimizer: [ new UglifyJsPlugin({ cache: true, parallel: true, sourceMap: true }), new OptimizeCSSAssetsPlugin({ cssProcessor: require('cssnano'), cssProcessorPluginOptions: { preset: ['default', { discardComments: { removeAll: true } }], }, canPrint: false }) ], runtimeChunk: { "name": "manifest" }, splitChunks: { cacheGroups: { default: false, vendors: false, vendor: { test: /[\\/]node_modules[\\/]/, name: 'vendors', chunks: 'all' } } } }, plugins: [ new VueLoaderPlugin(), new HappyPack({ id: 'happy_js_jsx', //共享进程池 threadPool: happyThreadPool, loaders: ['babel-loader'] }), // new HappyPack({ // id: 'happy-vue-loader', // loaders: [{ // loader: 'vue-loader', // options:vueLoaderConfig // }], // threadPool: happyThreadPool // }), new webpack.HashedModuleIdsPlugin(), new ProgressBarPlugin(), // new CleanWebpackPlugin(['dist']), //注入全局变量的插件,通常使用该插件来判别代码运行的环境变量 new webpack.DefinePlugin({ 'process.env': evnConfig }), new webpack.DllReferencePlugin({ context: path.resolve(__dirname), manifest: require('../assets_platform/vendor_dll/vendor-manifest.json') }), //这个主要是将生成的vendor.dll.js文件加上hash值插入到页面中。[也可以手动写到html这里不做处理] // new AddAssetHtmlPlugin([{ // filepath: path.resolve(__dirname, 'js_dll/comm_vendors.dll.js'), // outputPath: 'js_dll/', // publicPath: 'js_dll/', // includeSourcemap: false, // hash: true, // }]), // new CopyWebpackPlugin([ // { // from: path.resolve(__dirname, 'assets_platform'), // to: path.resolve(__dirname, 'dist/assets_platform') // }, // // { // // from: path.resolve(__dirname, 'js_dll'), // // to: path.resolve(__dirname, 'dist') // // } // ]) ] }; const path = require('path'); var HtmlWebpackPlugin = require('html-webpack-plugin'); const AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin');//------------ const CleanWebpackPlugin = require('clean-webpack-plugin'); const VueLoaderPlugin = require('vue-loader/lib/plugin'); const CopyWebpackPlugin = require('copy-webpack-plugin'); const ProgressBarPlugin = require('progress-bar-webpack-plugin'); const UglifyJsPlugin = require("uglifyjs-webpack-plugin"); const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin"); const webpack = require('webpack'); const packageConfig = require('../package.json'); const utils = require('./utils') const vueLoaderConfig = require('./vue-loader.conf') let evnConfig = require('./getEnvVar') // HappyPack // 原理：每次 webapck 解析一个模块时，HappyPack 会将它及它的依赖分配到worker线程中。 // 提示：由于HappyPack 对file-loader、url-loader 支持的不友好，所以不建议对该loader使用。 // 引入 Happpack 可以在 package.json 找到你下载的 const HappyPack = require('happypack'); // 安装 OS 模块这个主要是拿到当前电脑的CPU核数 const os = require('os'); /* 这个是设置共享线程池中的数量 size 控制设置数量类型只能是整数类型 / const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length }); module.exports = { // entry: { // 'login': ['babel-polyfill', './project/hivuiLogin/index.js'], // 'main': ['babel-polyfill','./project/hivuiMain/index.js'] // }, // output: { // filename: '[name].[contenthash].js', // chunkFilename: '[name].[contenthash].js', // path: path.resolve(__dirname, 'dist') // }, resolve: { extensions: ['.js', '.jsx', '.vue', '.json', '.dtvevt'], alias: { 'vue$': 'vue/dist/vue.esm.js', 'vuex$': 'vuex/dist/vuex.esm.js', '@': path.resolve(__dirname, `${packageConfig.name}`), '@main': path.resolve(__dirname, `../${packageConfig.name}/hivuiMain`), // '@': path.resolve(__dirname, 'src'), } }, externals: { 'vue': 'Vue', 'vuex': 'Vuex', 'vue-router': 'VueRouter', "element-ui": "ELEMENT", }, module: { rules: [ ...(utils.styleLoaders({ sourceMap: false, extract: process.env.NODE_ENV === 'production', usePostCSS: true })), { test: /\.(js\|jsx\|dtvevt?\|babel\|es6)$/, loader: 'happypack/loader?id=happy_js_jsx', // loader: 'babel-loader', // exclude: [path.resolve(__dirname, 'node_modules')]//放开，里头有些也是可选链操作符 }, { test: /\.(vue)$/, // loader: 'happypack/loader?id=happy-vue-loader' ???不行，Make sure the rule matching .vue files include vue-loader in its use. loader: 'vue-loader', options: vueLoaderConfig }, { test: /\.(png\|jpe?g\|gif\|svg)(\?.)?$/, loader: 'url-loader', options: { limit: 10000, name: '[name].[hash:7].[ext]', publicPath: "../img/", //替换CSS引用的图片路径可以替换成爱拍云上的路径 outputPath: "static/img/" //生成之后存放的路径 } }, { test: /\.(mp4\|webm\|ogg\|mp3\|wav\|flac\|aac)(\?.)?$/, loader: 'url-loader', options: { limit: 10000, name: '[name].[hash:7].[ext]', publicPath: "../img/", //替换CSS引用的图片路径可以替换成爱拍云上的路径 outputPath: "static/media/" //生成之后存放的路径 } }, { test: /\.(woff2?\|eot\|ttf\|otf)(\?.)?$/, loader: 'url-loader', options: { limit: 10000, name: '[name].[hash:7].[ext]', publicPath: "../fonts/", //替换CSS引用的图片路径可以替换成爱拍云上的路径 outputPath: "static/fonts/" //生成之后存放的路径 } } ] }, optimization: { minimizer: [ new UglifyJsPlugin({ cache: true, parallel: true, sourceMap: true }), new OptimizeCSSAssetsPlugin({ cssProcessor: require('cssnano'), cssProcessorPluginOptions: { preset: ['default', { discardComments: { removeAll: true } }], }, canPrint: false }) ], runtimeChunk: { "name": "manifest" }, splitChunks: { cacheGroups: { default: false, vendors: false, vendor: { test: /[\\/]node_modules[\\/]/, name: 'vendors', chunks: 'all' } } } }, plugins: [ new VueLoaderPlugin(), new HappyPack({ id: 'happy_js_jsx', //共享进程池 threadPool: happyThreadPool, loaders: ['babel-loader'] }), // new HappyPack({ // id: 'happy-vue-loader', // loaders: [{ // loader: 'vue-loader', // options:vueLoaderConfig // }], // threadPool: happyThreadPool // }), new webpack.HashedModuleIdsPlugin(), new ProgressBarPlugin(), // new CleanWebpackPlugin(['dist']), //注入全局变量的插件,通常使用该插件来判别代码运行的环境变量 new webpack.DefinePlugin({ 'process.env': evnConfig }), new webpack.DllReferencePlugin({ context: path.resolve(__dirname), manifest: require('../assets_platform/vendor_dll/vendor-manifest.json') }), //这个主要是将生成的vendor.dll.js文件加上hash值插入到页面中。[也可以手动写到html这里不做处理] // new AddAssetHtmlPlugin([{ // filepath: path.resolve(__dirname, 'js_dll/comm_vendors.dll.js'), // outputPath: 'js_dll/', // publicPath: 'js_dll/', // includeSourcemap: false, // hash: true, // }]), // new CopyWebpackPlugin([ // { // from: path.resolve(__dirname, 'assets_platform'), // to: path.resolve(__dirname, 'dist/assets_platform') // }, // // { // // from: path.resolve(__dirname, 'js_dll'), // // to: path.resolve(__dirname, 'dist') // // } // ]) ] };

Ignore Space Show notes View

build/webpack.base.conf.js

const path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
const AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin');//------------
const CleanWebpackPlugin = require('clean-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const ProgressBarPlugin = require('progress-bar-webpack-plugin');
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const webpack = require('webpack');
const packageConfig = require('../package.json');

const utils = require('./utils')
const vueLoaderConfig = require('./vue-loader.conf')
let evnConfig = require('./getEnvVar')

// HappyPack
// 原理：每次 webapck 解析一个模块时，HappyPack 会将它及它的依赖分配到worker线程中。
// 提示：由于HappyPack 对file-loader、url-loader 支持的不友好，所以不建议对该loader使用。
// 引入 Happpack 可以在 package.json 找到你下载的
const HappyPack = require('happypack');
// 安装 OS 模块 这个主要是拿到当前电脑的CPU核数
const os = require('os');
/*
	这个是设置共享线程池中的数量
	size 控制设置数量 类型 只能是 整数类型
*/
const cpus  = os.cpus().length;
const happyThreadPool = HappyPack.ThreadPool({ size: cpus-1>1?cpus-1:1 });//os.cpus().length  不能开最大

module.exports = {
  // entry: {
  //   'login': ['babel-polyfill', './project/hivuiLogin/index.js'],
  //   'main': ['babel-polyfill','./project/hivuiMain/index.js']
  // },
  // output: {
  //   filename: '[name].[contenthash].js',
  //   chunkFilename: '[name].[contenthash].js',
  //   path: path.resolve(__dirname, 'dist')
  // },
  resolve: {
    extensions: ['.js', '.jsx', '.vue', '.json', '.dtvevt'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      'vuex$': 'vuex/dist/vuex.esm.js',
      '@': path.resolve(__dirname, `${packageConfig.name}`),
      '@main': path.resolve(__dirname, `../${packageConfig.name}/hivuiMain`),
      // '@': path.resolve(__dirname, 'src'),
    }
  },
  externals: {
    'vue': 'Vue',
    'vuex': 'Vuex',
    'vue-router': 'VueRouter',
    "element-ui": "ELEMENT",
  },
  module: {
    rules: [
      ...(utils.styleLoaders({
        sourceMap: false,
        extract: process.env.NODE_ENV === 'production',
        usePostCSS: true
      })),
      {
        test: /\.(js|jsx|dtvevt?|babel|es6)$/,
        loader: 'happypack/loader?id=happy_js_jsx',
        // loader: 'babel-loader',
        // exclude: [path.resolve(__dirname, 'node_modules')]//放开，里头有些也是 可选链操作符
      },
      {
        test: /\.(vue)$/,
        // loader: 'happypack/loader?id=happy-vue-loader'  ???不行，Make sure the rule matching .vue files include vue-loader in its use.
        loader: 'vue-loader',
        options: vueLoaderConfig
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: '[name].[hash:7].[ext]',
          publicPath: "../img/",	//替换CSS引用的图片路径 可以替换成爱拍云上的路径
          outputPath: "static/img/"		//生成之后存放的路径
        }
      },
      {
        test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: '[name].[hash:7].[ext]',
          publicPath: "../img/",	//替换CSS引用的图片路径 可以替换成爱拍云上的路径
          outputPath: "static/media/"		//生成之后存放的路径
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: '[name].[hash:7].[ext]',
          publicPath: "../fonts/",	//替换CSS引用的图片路径 可以替换成爱拍云上的路径
          outputPath: "static/fonts/"		//生成之后存放的路径
        }
      }
    ]
  },

optimization: {
    minimizer: [
      new UglifyJsPlugin({
        cache: true,
        parallel: true,
        sourceMap: true
      }),
      new OptimizeCSSAssetsPlugin({
        cssProcessor: require('cssnano'),
        cssProcessorPluginOptions: {
          preset: ['default', { discardComments: { removeAll: true } }],
        },
        canPrint: false
      })
    ],
    runtimeChunk: {
      "name": "manifest"
    },
    splitChunks: {
      cacheGroups: {
        default: false,
        vendors: false,
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all'
        }

}
    }
  },
  plugins: [
    new VueLoaderPlugin(),
    new HappyPack({
      id: 'happy_js_jsx',
      //共享进程池
      threadPool: happyThreadPool,
      loaders: ['babel-loader']
    }),
    // new HappyPack({
    //   id: 'happy-vue-loader',
    //   loaders: [{
    //     loader: 'vue-loader',
    //     options:vueLoaderConfig 
    //   }],
    //   threadPool: happyThreadPool
    // }),
    new webpack.HashedModuleIdsPlugin(),
    new ProgressBarPlugin(),
    // new CleanWebpackPlugin(['dist']),
    //注入全局变量的插件,通常使用该插件来判别代码运行的环境变量
    new webpack.DefinePlugin({
      'process.env': evnConfig
    }),
    new webpack.DllReferencePlugin({
      context: path.resolve(__dirname),
      manifest: require('../assets_platform/vendor_dll/vendor-manifest.json')
    }),
    //这个主要是将生成的vendor.dll.js文件加上hash值插入到页面中。[也可以手动写到html这里不做处理]
    // new AddAssetHtmlPlugin([{
    //   filepath: path.resolve(__dirname, 'js_dll/comm_vendors.dll.js'),
    //   outputPath: 'js_dll/',
    //   publicPath: 'js_dll/',
    //   includeSourcemap: false,
    //   hash: true,
    // }]),
    // new CopyWebpackPlugin([
    //   {
    //     from: path.resolve(__dirname, 'assets_platform'),
    //     to: path.resolve(__dirname, 'dist/assets_platform')
    //   },
    //   // {
    //   //   from: path.resolve(__dirname, 'js_dll'),
    //   //   to: path.resolve(__dirname, 'dist')
    //   // }
    // ])
  ]

};

const utils = require('./utils')
const vueLoaderConfig = require('./vue-loader.conf')
let evnConfig = require('./getEnvVar')

// HappyPack
// 原理：每次 webapck 解析一个模块时，HappyPack 会将它及它的依赖分配到worker线程中。
// 提示：由于HappyPack 对file-loader、url-loader 支持的不友好，所以不建议对该loader使用。
// 引入 Happpack 可以在 package.json 找到你下载的
const HappyPack = require('happypack');
// 安装 OS 模块 这个主要是拿到当前电脑的CPU核数
const os = require('os');
/*
	这个是设置共享线程池中的数量
	size 控制设置数量 类型 只能是 整数类型
*/
const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length });

};

Ignore Space Show notes View build/webpack.prod.conf.js
// 多进程编译所有 //parallel-webpack允许您并行运行多个Webpack构建,从而将工作分散到各个处理器上,从而有助于显着加快构建速度 let argvs = (process.argv[2] \|\| "").replace(/\s$/g, "") var run = require('parallel-webpack').run, configPath = require.resolve('./webpack.get-list.js'), options = { watch: false, maxRetries: 1, stats: false, // defaults to false maxConcurrentWorkers: 1,// use 2 workers cup个数 argv: [argvs] }; function notify(res) { //多打包时，如果其中一个模块出错，不知道是哪个模块 console.log('\n--------编译完成------- \n'); } let moduleList = argvs!=""?argvs.split(','):[]; let len = moduleList.length; if (len == 0) { moduleList = require('./webpack.get-module').moduleList \|\| []; console.log('=========进入全模块编译状态...=============') console.log('=========共有'+moduleList.length+'模块=============') run(configPath, options, notify); } else { let webpack = require('webpack') let webpackList = require('./webpack.get-list.js'); console.log('=========指定模块编译状态...==============') console.log('=========共有'+len+'模块=============') webpack(webpackList[0], (err, stats) => { //这个回调一定要写，不然打包不出来 if (err \|\| stats.hasErrors()) {//编译错误不在 err 对象内，而是需要使用 stats.hasErrors() 单独处理 const info = stats.toJson(); // console.error(info.errors); for (let i = 0, l = info.errors.length; i < l; i++) { // console.log(chalk.red(info.errors[i].message)); // console.error(info.errors[i].message) console.error(info.errors[i]) } } // 处理完成 }) } // 多进程编译所有 //parallel-webpack允许您并行运行多个Webpack构建,从而将工作分散到各个处理器上,从而有助于显着加快构建速度 let argvs = (process.argv[2] \|\| "").replace(/\s$/g, "") var run = require('parallel-webpack').run, configPath = require.resolve('./webpack.get-list.js'), options = { watch: false, maxRetries: 1, stats: false, // defaults to false maxConcurrentWorkers: 2,// use 2 workers cup个数 argv: [argvs] }; function notify(res) { //多打包时，如果其中一个模块出错，不知道是哪个模块 console.log('\n--------编译完成------- \n'); } let moduleList = argvs!=""?argvs.split(','):[]; let len = moduleList.length; if (len == 0) { moduleList = require('./webpack.get-module').moduleList \|\| []; console.log('=========进入全模块编译状态...=============') console.log('=========共有'+moduleList.length+'模块=============') run(configPath, options, notify); } else { let webpack = require('webpack') let webpackList = require('./webpack.get-list.js'); console.log('=========指定模块编译状态...==============') console.log('=========共有'+len+'模块=============') webpack(webpackList[0], (err, stats) => { //这个回调一定要写，不然打包不出来 if (err \|\| stats.hasErrors()) {//编译错误不在 err 对象内，而是需要使用 stats.hasErrors() 单独处理 const info = stats.toJson(); // console.error(info.errors); for (let i = 0, l = info.errors.length; i < l; i++) { // console.log(chalk.red(info.errors[i].message)); // console.error(info.errors[i].message) console.error(info.errors[i]) } } // 处理完成 }) }

Ignore Space Show notes View

build/webpack.prod.conf.js

// 多进程 编译所有
//parallel-webpack允许您并行运行多个Webpack构建,从而将工作分散到各个处理器上,从而有助于显着加快构建速度
let argvs = (process.argv[2] || "").replace(/\s*$/g, "")
var run = require('parallel-webpack').run,
  configPath = require.resolve('./webpack.get-list.js'),
  options = {
    watch: false,
    maxRetries: 1,
    stats: false, // defaults to false
    maxConcurrentWorkers: 1,// use 2 workers  cup个数
    argv: [argvs]
  };

// 多进程 编译所有
//parallel-webpack允许您并行运行多个Webpack构建,从而将工作分散到各个处理器上,从而有助于显着加快构建速度
let argvs = (process.argv[2] || "").replace(/\s*$/g, "")
var run = require('parallel-webpack').run,
  configPath = require.resolve('./webpack.get-list.js'),
  options = {
    watch: false,
    maxRetries: 1,
    stats: false, // defaults to false
    maxConcurrentWorkers: 2,// use 2 workers  cup个数
    argv: [argvs]
  };

Show line notes below