修改打包方式，功能一个个执行webpack

08335 / hivui-platform-template

hivui平台项目模板

Browse code 修改打包方式，功能一个个执行webpack master
1 parent 97f47d5 commit fd55ec6b471dc9435b7287ad53fdc145e8ea232c caibinghong authored on 2 Dec 2021

Showing 6 changed files

Ignore Space Show notes View build/build.js
'use strict' require('./check-versions')() const fs = require("fs") const chalk = require('chalk') const { merge } = require('webpack-merge'); process.env.NODE_ENV = 'production' // 用来记录当前打包的模块路径列表 let moduleList = (process.argv[2] \|\| "").replace(/\s$/g, "") if (moduleList == "") { moduleList = require('./module-conf').moduleList \|\| [] } else { moduleList = moduleList.split(',') } // console.log('----moduleList-----:\n',moduleList,'\n----------------------') // 如果有传参时，对传入的参数进行检测，如果参数非法，那么停止打包操作 const checkModule = require('./module-conf').checkModule for (let i = moduleList.length - 1; i >= 0; i--) { if (!checkModule(moduleList[i])) { return } } const path = require('path') // const ora = require('ora') const rm = require('rimraf') const webpack = require('webpack') const HtmlWebpackPlugin = require('html-webpack-plugin') const webpackConfig = require('./webpack.base.conf') let webpackList = [], rmList = []; //删除文件 function getRm(pathStr) { return new Promise((resolve, reject) => { rm(pathStr, err => { if (err) { reject(pathStr + 'del failed!!'); throw err; } resolve(); }); }).then(res => { //console.log(res) }); } //构建webpack 配置 for (let i = moduleList.length - 1; i >= 0; i--) { let MODULE = moduleList[i]; //构建时要删除的模块目录 rmList.push(getRm(path.resolve(__dirname, '../dist', MODULE))); //添加每个模块的webpack 配置 let MODULE_NAME = MODULE.split('/').pop(); let entry = {}; entry[MODULE_NAME] = `${moduleList[i]}/index.js`; let wpk = merge({}, webpackConfig, { entry: entry, output: { path: path.resolve(__dirname, '../dist', MODULE) } }); let htmlTemplate = `${MODULE}/index.html` var checkPath = fs.existsSync(htmlTemplate); //如果目录存在返回 true ，如果目录不存在返回false if (checkPath == false) { htmlTemplate = path.resolve(__dirname, '../index.html') } wpk.plugins.push( new HtmlWebpackPlugin({ filename: path.resolve(__dirname, '../dist', MODULE, 'index.html'), template: htmlTemplate,//如果html 不存在考虑用全局根目录下 inject: true, // 这里要指定把哪些chunks追加到html中，默认会把所有入口的chunks追加到html中，这样是不行的 // chunks: ['vendor', 'manifest', 'elementUI', 'hiui', MODULE_NAME], minify: { removeComments: true,//去除注释 collapseWhitespace: true,//是否去除空格 } })) webpackList.push(wpk); } //编译所有 // webpack(webpackList, (err, stats) => { // if (err) throw err; // if (stats.hasErrors()) { // stats.stats.map(item => { // item.compilation.errors.map(msg => { // console.log(chalk.red(msg)); // }) // }) // // console.log(chalk.red(' Build failed with errors.\n')); // process.exit(1); // } // // console.log(chalk.cyan(' Build complete.\n')); // }); console.log(`正在编译,总共（${moduleList.length}）页面...`) console.log(`\n----------------------------------------------------------------`); console.log(chalk.yellow(`序号\t 模块\t 路径`)); console.log(`\n----------------------------------------------------------------`); let webpackIndex=0; function doWebpack(webpackItem){ let md = webpackItem.entry.desktop\|\|""; md = md.replace(/\/dtv\/1\.0\.0\/desktop\/index\.js/gi,''); md = md.split('/').pop(); console.log(`${webpackIndex}\t${md}\t 路径`,webpackItem.entry.desktop); webpack(webpackItem, (err, stats) => { if (err \|\| stats.hasErrors()) { // 在这里处理错误 // throw err; // stats.stats.map(item => { // item.compilation.errors.map(msg => { // console.log(chalk.red(msg)); // }) // }) console.log(chalk.red(' Build failed with errors.\n'),err); // process.exit(1); } //else{ // 处理完成 webpackIndex++; doWebpack(webpackList[webpackIndex]); // } }); } doWebpack(webpackList[webpackIndex]); console.log(`\n----------------------------------------------------------------\n`); 'use strict' require('./check-versions')() const fs = require("fs") const chalk = require('chalk') const { merge } = require('webpack-merge'); process.env.NODE_ENV = 'production' // 用来记录当前打包的模块路径列表 let moduleList = (process.argv[2] \|\| "").replace(/\s$/g, "") if (moduleList == "") { moduleList = require('./module-conf').moduleList \|\| [] } else { moduleList = moduleList.split(',') } // 如果有传参时，对传入的参数进行检测，如果参数非法，那么停止打包操作 const checkModule = require('./module-conf').checkModule for (let i = moduleList.length - 1; i >= 0; i--) { if (!checkModule(moduleList[i])) { return } } const path = require('path') // const ora = require('ora') const rm = require('rimraf') const webpack = require('webpack') const HtmlWebpackPlugin = require('html-webpack-plugin') const webpackConfig = require('./webpack.base.conf') let webpackList = [], rmList = []; //删除文件 function getRm(pathStr) { return new Promise((resolve, reject) => { rm(pathStr, err => { if (err) { reject(pathStr + 'del failed!!'); throw err; } resolve(); }); }).then(res => { //console.log(res) }); } //构建webpack 配置 for (let i = moduleList.length - 1; i >= 0; i--) { let MODULE = moduleList[i]; //构建时要删除的模块目录 rmList.push(getRm(path.resolve(__dirname, '../dist', MODULE))); //添加每个模块的webpack 配置 let MODULE_NAME = MODULE.split('/').pop(); let entry = {}; entry[MODULE_NAME] = `${moduleList[i]}/index.js`; let wpk = merge({}, webpackConfig, { entry: entry, output: { path: path.resolve(__dirname, '../dist', MODULE) } }); let htmlTemplate = `${MODULE}/index.html` var checkPath = fs.existsSync(htmlTemplate); //如果目录存在返回 true ，如果目录不存在返回false if (checkPath == false) { htmlTemplate = path.resolve(__dirname, '../index.html') } wpk.plugins.push( new HtmlWebpackPlugin({ filename: path.resolve(__dirname, '../dist', MODULE, 'index.html'), template: htmlTemplate,//如果html 不存在考虑用全局根目录下 inject: true, // 这里要指定把哪些chunks追加到html中，默认会把所有入口的chunks追加到html中，这样是不行的 // chunks: ['vendor', 'manifest', 'elementUI', 'hiui', MODULE_NAME], minify: { removeComments: true,//去除注释 collapseWhitespace: true,//是否去除空格 } })) webpackList.push(wpk); } webpack(webpackList, (err, stats) => { if (err) throw err; if (stats.hasErrors()) { stats.stats.map(item => { item.compilation.errors.map(msg => { console.log(chalk.red(msg)); }) }) // console.log(chalk.red(' Build failed with errors.\n')); process.exit(1); } // console.log(chalk.cyan(' Build complete.\n')); }); return;

Ignore Space Show notes View

build/build.js

'use strict'
require('./check-versions')()
const fs = require("fs")
const chalk = require('chalk')
const { merge } = require('webpack-merge');

process.env.NODE_ENV = 'production'
// 用来记录当前打包的模块路径列表
let moduleList = (process.argv[2] || "").replace(/\s*$/g, "")
if (moduleList == "") {
  moduleList = require('./module-conf').moduleList || []
} else {
  moduleList = moduleList.split(',')
}
// console.log('----moduleList-----:\n',moduleList,'\n----------------------')
// 如果有传参时，对传入的参数进行检测，如果参数非法，那么停止打包操作
const checkModule = require('./module-conf').checkModule
for (let i = moduleList.length - 1; i >= 0; i--) {
  if (!checkModule(moduleList[i])) {
    return
  }
}

const path = require('path')
// const ora = require('ora')
const rm = require('rimraf')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const webpackConfig = require('./webpack.base.conf')
let webpackList = [], rmList = [];

//删除文件
function getRm(pathStr) {
  return new Promise((resolve, reject) => {
    rm(pathStr, err => {
      if (err) {
        reject(pathStr + 'del failed!!');
        throw err;
      }
      resolve();
    });
  }).then(res => {
    //console.log(res)
  });
}

//构建webpack 配置
for (let i = moduleList.length - 1; i >= 0; i--) {
  let MODULE = moduleList[i]; 
  //构建时要删除的模块目录 
  rmList.push(getRm(path.resolve(__dirname, '../dist', MODULE)));
  //添加每个模块的webpack 配置
  let MODULE_NAME = MODULE.split('/').pop(); 
  let entry = {};
  entry[MODULE_NAME] = `${moduleList[i]}/index.js`;
  let wpk = merge({}, webpackConfig, {
    entry: entry,
    output: {
      path: path.resolve(__dirname, '../dist', MODULE)
    }
  });
  let htmlTemplate = `${MODULE}/index.html`

var checkPath = fs.existsSync(htmlTemplate);
  //如果目录存在 返回 true ，如果目录不存在 返回false
  if (checkPath == false) {
    htmlTemplate = path.resolve(__dirname, '../index.html')
  }

wpk.plugins.push(
    new HtmlWebpackPlugin({
      filename: path.resolve(__dirname, '../dist', MODULE, 'index.html'),
      template: htmlTemplate,//如果html 不存在考虑用全局根目录下
      inject: true,
      // 这里要指定把哪些chunks追加到html中，默认会把所有入口的chunks追加到html中，这样是不行的
      // chunks: ['vendor', 'manifest', 'elementUI', 'hiui', MODULE_NAME],
      minify: {
        removeComments: true,//去除注释
        collapseWhitespace: true,//是否去除空格
      }
    }))
  webpackList.push(wpk);
} 
//编译所有
// webpack(webpackList, (err, stats) => {
//   if (err) throw err;
//   if (stats.hasErrors()) {
//     stats.stats.map(item => {
//       item.compilation.errors.map(msg => {
//         console.log(chalk.red(msg));
//       })
//     })
//     // console.log(chalk.red('  Build failed with errors.\n'));
//     process.exit(1);
//   }
//   // console.log(chalk.cyan('  Build complete.\n'));
// });

console.log(`正在编译,总共（${moduleList.length}）页面...`)
console.log(`\n----------------------------------------------------------------`);
console.log(chalk.yellow(`序号\t         模块\t      路径`));
console.log(`\n----------------------------------------------------------------`);
let webpackIndex=0;
function doWebpack(webpackItem){
  let md = webpackItem.entry.desktop||"";
  md = md.replace(/\/dtv\/1\.0\.0\/desktop\/index\.js/gi,'');
  md = md.split('/').pop(); 
  console.log(`${webpackIndex}\t${md}\t     路径`,webpackItem.entry.desktop);
  
  webpack(webpackItem, (err, stats) => {
    if (err || stats.hasErrors()) {
      // 在这里处理错误
      // throw err;
      // stats.stats.map(item => {
      //   item.compilation.errors.map(msg => {
      //     console.log(chalk.red(msg));
      //   })
      // })
      console.log(chalk.red('  Build failed with errors.\n'),err);
      // process.exit(1);
    }
    //else{
      // 处理完成
      webpackIndex++;
      doWebpack(webpackList[webpackIndex]);
    // }    
  });
}
doWebpack(webpackList[webpackIndex]);
console.log(`\n----------------------------------------------------------------\n`);

'use strict'
require('./check-versions')()
const fs = require("fs")
const chalk = require('chalk')
const { merge } = require('webpack-merge');

// 如果有传参时，对传入的参数进行检测，如果参数非法，那么停止打包操作
const checkModule = require('./module-conf').checkModule
for (let i = moduleList.length - 1; i >= 0; i--) {
  if (!checkModule(moduleList[i])) {
    return
  }
}

//构建webpack 配置
for (let i = moduleList.length - 1; i >= 0; i--) {
  let MODULE = moduleList[i];
  //构建时要删除的模块目录 
  rmList.push(getRm(path.resolve(__dirname, '../dist', MODULE)));
  //添加每个模块的webpack 配置
  let MODULE_NAME = MODULE.split('/').pop();
  let entry = {};
  entry[MODULE_NAME] = `${moduleList[i]}/index.js`;
  let wpk = merge({}, webpackConfig, {
    entry: entry,
    output: {
      path: path.resolve(__dirname, '../dist', MODULE)
    }
  });
  let htmlTemplate = `${MODULE}/index.html`

webpack(webpackList, (err, stats) => {
  if (err) throw err;
  if (stats.hasErrors()) {
    stats.stats.map(item => {
      item.compilation.errors.map(msg => {
        console.log(chalk.red(msg));
      })
    })
    // console.log(chalk.red('  Build failed with errors.\n'));
    process.exit(1);
  }
  // console.log(chalk.cyan('  Build complete.\n'));
});

return;

Ignore Space Show notes View build/run.js
//build.js 升级版多进程编译所有 //parallel-webpack允许您并行运行多个Webpack构建,从而将工作分散到各个处理器上,从而有助于显着加快构建速度 let moduleList = (process.argv[2] \|\| "").replace(/\s$/g, ""); var run = require('parallel-webpack').run, configPath = require.resolve('./webpack.config.js'), options = { watch: false, maxRetries: 1, stats: false, // defaults to false maxConcurrentWorkers: 2 ,// use 2 workers argv:[moduleList] }; function notify(res) { // do things // if(res&&res.message){ // console.log('\n',res.message,'\n'); // } console.log(new Date(),'--------------- \n'); } // require('./copyBaseAssets'); run(configPath, options, notify); //build.js 升级版多进程编译所有 //parallel-webpack允许您并行运行多个Webpack构建,从而将工作分散到各个处理器上,从而有助于显着加快构建速度 let moduleList = (process.argv[2] \|\| "").replace(/\s$/g, ""); var run = require('parallel-webpack').run, configPath = require.resolve('./webpack.config.js'), options = { watch: false, maxRetries: 1, stats: false, // defaults to false maxConcurrentWorkers: 2 ,// use 2 workers argv:[moduleList] }; function notify(res) { // do things if(res&&res.message){ console.log('\n',res.message,'\n'); } } // require('./copyBaseAssets'); run(configPath, options, notify);

Ignore Space Show notes View

build/run.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') const ProgressBarPlugin = require('progress-bar-webpack-plugin'); const chalk = require('chalk') //运行打包命令的时候就可以看到每个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 ProgressBarPlugin({ complete: "█", format: `${chalk.green('Building')} [ ${chalk.blue(':bar')} ] ':msg:' ${chalk.bold('(:percent)')}`, clear: true }), //注入全局变量的插件,通常使用该插件来判别代码运行的环境变量 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')

const ProgressBarPlugin = require('progress-bar-webpack-plugin');
const chalk = require('chalk')

//运行打包命令的时候就可以看到每个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 ProgressBarPlugin({
            complete: "█",
            format: `${chalk.green('Building')} [ ${chalk.blue(':bar')} ] ':msg:' ${chalk.bold('(:percent)')}`,
            clear: true
        }),
        //注入全局变量的插件,通常使用该插件来判别代码运行的环境变量
        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)
}

// ...(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 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 ps_mem 查看各种程序内存情况 yun install ps_mem 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

Ignore Space Show notes View

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

ps_mem 查看各种程序内存情况
 yun install ps_mem

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

Ignore Space Show notes View package.json
{ "name": "jwjx", "version": "1.0.5", "description": "A hi-vui-template project", "author": "0000206", "scripts": { "pm2:start": "pm2 start processes.json", "pm2:restart": "pm2 restart all", "pm2:stop": "pm2 stop ", "pm2:log": "pm2 logs ", "pm2:cpu": "pm2 monit ", "pm2:kill": "pm2 delete ", "dev1": "vite --host", "dev": "vite", "dev:staging": " vite --mode staging", "vite-build": "vite build", "vite-serve": "vite preview", "rm:vite": "rimraf node_modules/.vite & rimraf node_modules/.cache", "start": "npm run dev", "build": "node build/copyBaseAssets.js & node build/build.js", "build1": "node build/copyBaseAssets.js & node build/run.js", "build:debug": "node build/build.js", "build:login": "node build/build.js ./project/hivuiLogin", "build:main": "node build/run.js ./project/hivuiMain", "build:demo": "node build/run.js ./project/demo", "build:dll": "webpack --config=build/webpack.dll.js", "copyassets": "node build/copyBaseAssets.js" }, "dependencies": { "@babel/runtime-corejs3": "^7.14.6", "@vue/babel-helper-vue-jsx-merge-props": "^1.2.1", "axios": "^0.21.1", "classnames": "^2.3.1", "enquire.js": "^2.1.6", "font-awesome": "^4.7.0", "hi-taskcenter": "^1.0.5", "hi-ui": "^1.1.655", "lodash": "^4.17.21", "md5": "^2.3.0", "qs": "^6.10.1", "screenfull": "^5.1.0", "sortablejs": "^1.13.0", "vue": "^2.6.12", "vue-draggable-resizable": "^2.3.0", "vue-gemini-scrollbar": "^2.0.1", "vue-jstree": "^2.1.6", "vue-router": "^3.5.1", "vuex": "^3.6.2", "zhc-flowchart": "^1.0.7" }, "devDependencies": { "@babel/core": "^7.14.5", "@babel/plugin-transform-runtime": "^7.14.5", "@babel/preset-env": "^7.14.5", "@vitejs/plugin-vue-jsx": "^1.1.5", "@vue/babel-plugin-transform-vue-jsx": "^1.2.1", "@vue/babel-preset-jsx": "^1.2.4", "add-asset-html-webpack-plugin": "^3.2.0", "autoprefixer": "^10.2.6", "babel-loader": "^8.2.2", "babel-plugin-component": "^1.1.1", "babel-plugin-syntax-jsx": "^6.18.0", "babel-plugin-transform-vite-meta-env": "^1.0.3", "css-loader": "^5.2.6", "css-minimizer-webpack-plugin": "^3.0.2", "dotenv": "^10.0.0", "file-loader": "^6.2.0", "html-webpack-plugin": "^5.3.2", "less": "^4.1.1", "less-loader": "^10.0.0", "mini-css-extract-plugin": "^1.6.1", "node-sass": "^4.13.0", "parallel-webpack": "^2.6.0", "postcss-import": "^14.0.2", "postcss-loader": "^6.1.0", "postcss-url": "^10.1.3", "progress-bar-webpack-plugin": "^2.1.0", "rimraf": "^3.0.2", "sass": "^1.38.0", "sass-loader": "^8.0.2", "semver": "^5.4.1", "shelljs": "^0.7.8", "speed-measure-webpack-plugin": "^1.5.0", "svg-sprite-loader": "^3.5.2", "terser-webpack-plugin": "^5.1.4", "url-loader": "^4.1.1", "vite": "2.3.7", "vite-plugin-html": "^2.0.7", "vite-plugin-imp": "^2.0.7", "vite-plugin-pagedata": "^1.0.4", "vite-plugin-vue2": "^1.6.2", "vue-loader": "^15.9.7", "vue-style-loader": "^4.1.3", "vue-template-compiler": "^2.6.12", "webpack": "^5.40.0", "webpack-cli": "^4.7.2", "webpack-merge": "^5.8.0" }, "engines": { "node": ">= 6.0.0", "npm": ">= 3.0.0" } } { "name": "hi-vui-template", "version": "1.0.5", "description": "A hi-vui-template project", "author": "caibinghong <caibinghong@163.com>", "scripts": { "pm2:start": "pm2 start processes.json", "pm2:restart": "pm2 restart all", "pm2:stop": "pm2 stop ", "pm2:log": "pm2 logs ", "pm2:cpu": "pm2 monit ", "pm2:kill": "pm2 delete ", "dev1": "vite --host", "dev": "vite", "dev:staging": " vite --mode staging", "vite-build": "vite build", "vite-serve": "vite preview", "rm:vite": "rimraf node_modules/.vite & rimraf node_modules/.cache", "start": "npm run dev", "build": "node build/copyBaseAssets.js & node build/run.js", "build:debug": "node build/build.js", "build:login": "node build/build.js ./project/hivuiLogin", "build:main": "node build/run.js ./project/hivuiMain", "build:demo": "node build/run.js ./project/demo", "build:dll": "webpack --config=build/webpack.dll.js", "copyassets": "node build/copyBaseAssets.js" }, "dependencies": { "@babel/runtime-corejs3": "^7.14.6", "@vue/babel-helper-vue-jsx-merge-props": "^1.2.1", "axios": "^0.21.1", "classnames": "^2.3.1", "enquire.js": "^2.1.6", "font-awesome": "^4.7.0", "hi-taskcenter": "^1.0.5", "hi-ui": "^1.1.655", "lodash": "^4.17.21", "md5": "^2.3.0", "qs": "^6.10.1", "screenfull": "^5.1.0", "sortablejs": "^1.13.0", "vue": "^2.6.12", "vue-draggable-resizable": "^2.3.0", "vue-gemini-scrollbar": "^2.0.1", "vue-jstree": "^2.1.6", "vue-router": "^3.5.1", "vuex": "^3.6.2", "zhc-flowchart": "^1.0.7" }, "devDependencies": { "@babel/core": "^7.14.5", "@babel/plugin-transform-runtime": "^7.14.5", "@babel/preset-env": "^7.14.5", "@vitejs/plugin-vue-jsx": "^1.1.5", "@vue/babel-plugin-transform-vue-jsx": "^1.2.1", "@vue/babel-preset-jsx": "^1.2.4", "add-asset-html-webpack-plugin": "^3.2.0", "autoprefixer": "^10.2.6", "babel-loader": "^8.2.2", "babel-plugin-component": "^1.1.1", "babel-plugin-syntax-jsx": "^6.18.0", "babel-plugin-transform-vite-meta-env": "^1.0.3", "css-loader": "^5.2.6", "css-minimizer-webpack-plugin": "^3.0.2", "dotenv": "^10.0.0", "file-loader": "^6.2.0", "html-webpack-plugin": "^5.3.2", "less": "^4.1.1", "less-loader": "^10.0.0", "mini-css-extract-plugin": "^1.6.1", "node-sass": "^4.13.0", "parallel-webpack": "^2.6.0", "postcss-import": "^14.0.2", "postcss-loader": "^6.1.0", "postcss-url": "^10.1.3", "rimraf": "^3.0.2", "sass": "^1.38.0", "sass-loader": "^8.0.2", "semver": "^5.4.1", "shelljs": "^0.7.8", "speed-measure-webpack-plugin": "^1.5.0", "svg-sprite-loader": "^3.5.2", "terser-webpack-plugin": "^5.1.4", "url-loader": "^4.1.1", "vite": "2.3.7", "vite-plugin-html": "^2.0.7", "vite-plugin-imp": "^2.0.7", "vite-plugin-pagedata": "^1.0.4", "vite-plugin-vue2": "^1.6.2", "vue-loader": "^15.9.7", "vue-style-loader": "^4.1.3", "vue-template-compiler": "^2.6.12", "webpack": "^5.40.0", "webpack-cli": "^4.7.2", "webpack-merge": "^5.8.0" }, "engines": { "node": ">= 6.0.0", "npm": ">= 3.0.0" } }

Ignore Space Show notes View

package.json

{
  "name": "jwjx",
  "version": "1.0.5",
  "description": "A hi-vui-template project",
  "author": "0000206",
  "scripts": {
    "pm2:start": "pm2 start processes.json",
    "pm2:restart": "pm2 restart all",
    "pm2:stop": "pm2 stop ",
    "pm2:log": "pm2 logs ",
    "pm2:cpu": "pm2 monit ",
    "pm2:kill": "pm2 delete ",
    "dev1": "vite --host",
    "dev": "vite",
    "dev:staging": " vite --mode staging",
    "vite-build": "vite build",
    "vite-serve": "vite preview",
    "rm:vite": "rimraf node_modules/.vite & rimraf node_modules/.cache",
    "start": "npm run dev",
    "build": "node build/copyBaseAssets.js & node build/build.js",
    "build1": "node build/copyBaseAssets.js & node build/run.js",
    "build:debug": "node build/build.js",
    "build:login": "node build/build.js ./project/hivuiLogin",
    "build:main": "node build/run.js ./project/hivuiMain",
    "build:demo": "node build/run.js ./project/demo",
    "build:dll": "webpack --config=build/webpack.dll.js",
    "copyassets": "node build/copyBaseAssets.js"
  },
  "dependencies": {
    "@babel/runtime-corejs3": "^7.14.6",
    "@vue/babel-helper-vue-jsx-merge-props": "^1.2.1",
    "axios": "^0.21.1",
    "classnames": "^2.3.1",
    "enquire.js": "^2.1.6",
    "font-awesome": "^4.7.0",
    "hi-taskcenter": "^1.0.5",
    "hi-ui": "^1.1.655",
    "lodash": "^4.17.21",
    "md5": "^2.3.0",
    "qs": "^6.10.1",
    "screenfull": "^5.1.0",
    "sortablejs": "^1.13.0",
    "vue": "^2.6.12",
    "vue-draggable-resizable": "^2.3.0",
    "vue-gemini-scrollbar": "^2.0.1",
    "vue-jstree": "^2.1.6",
    "vue-router": "^3.5.1",
    "vuex": "^3.6.2",
    "zhc-flowchart": "^1.0.7"
  },
  "devDependencies": {
    "@babel/core": "^7.14.5",
    "@babel/plugin-transform-runtime": "^7.14.5",
    "@babel/preset-env": "^7.14.5",
    "@vitejs/plugin-vue-jsx": "^1.1.5",
    "@vue/babel-plugin-transform-vue-jsx": "^1.2.1",
    "@vue/babel-preset-jsx": "^1.2.4",
    "add-asset-html-webpack-plugin": "^3.2.0",
    "autoprefixer": "^10.2.6",
    "babel-loader": "^8.2.2",
    "babel-plugin-component": "^1.1.1",
    "babel-plugin-syntax-jsx": "^6.18.0",
    "babel-plugin-transform-vite-meta-env": "^1.0.3",
    "css-loader": "^5.2.6",
    "css-minimizer-webpack-plugin": "^3.0.2",
    "dotenv": "^10.0.0",
    "file-loader": "^6.2.0",
    "html-webpack-plugin": "^5.3.2",
    "less": "^4.1.1",
    "less-loader": "^10.0.0",
    "mini-css-extract-plugin": "^1.6.1",
    "node-sass": "^4.13.0",
    "parallel-webpack": "^2.6.0",
    "postcss-import": "^14.0.2",
    "postcss-loader": "^6.1.0",
    "postcss-url": "^10.1.3",
    "progress-bar-webpack-plugin": "^2.1.0",
    "rimraf": "^3.0.2",
    "sass": "^1.38.0",
    "sass-loader": "^8.0.2",
    "semver": "^5.4.1",
    "shelljs": "^0.7.8",
    "speed-measure-webpack-plugin": "^1.5.0",
    "svg-sprite-loader": "^3.5.2",
    "terser-webpack-plugin": "^5.1.4",
    "url-loader": "^4.1.1",
    "vite": "2.3.7",
    "vite-plugin-html": "^2.0.7",
    "vite-plugin-imp": "^2.0.7",
    "vite-plugin-pagedata": "^1.0.4",
    "vite-plugin-vue2": "^1.6.2",
    "vue-loader": "^15.9.7",
    "vue-style-loader": "^4.1.3",
    "vue-template-compiler": "^2.6.12",
    "webpack": "^5.40.0",
    "webpack-cli": "^4.7.2",
    "webpack-merge": "^5.8.0"
  },
  "engines": {
    "node": ">= 6.0.0",
    "npm": ">= 3.0.0"
  }
}

{
  "name": "hi-vui-template",
  "version": "1.0.5",
  "description": "A hi-vui-template project",
  "author": "caibinghong <caibinghong@163.com>",
  "scripts": {
    "pm2:start": "pm2 start processes.json",
    "pm2:restart": "pm2 restart all",
    "pm2:stop": "pm2 stop ",
    "pm2:log": "pm2 logs ",
    "pm2:cpu": "pm2 monit ",
    "pm2:kill": "pm2 delete ",
    "dev1": "vite --host",
    "dev": "vite",
    "dev:staging": " vite --mode staging",
    "vite-build": "vite build",
    "vite-serve": "vite preview",
    "rm:vite": "rimraf node_modules/.vite & rimraf node_modules/.cache",
    "start": "npm run dev",
    "build": "node build/copyBaseAssets.js & node build/run.js",
    "build:debug": "node build/build.js",
    "build:login": "node build/build.js ./project/hivuiLogin",
    "build:main": "node build/run.js ./project/hivuiMain",
    "build:demo": "node build/run.js ./project/demo",
    "build:dll": "webpack --config=build/webpack.dll.js",
    "copyassets": "node build/copyBaseAssets.js"
  },
  "dependencies": {
    "@babel/runtime-corejs3": "^7.14.6",
    "@vue/babel-helper-vue-jsx-merge-props": "^1.2.1",
    "axios": "^0.21.1",
    "classnames": "^2.3.1",
    "enquire.js": "^2.1.6",
    "font-awesome": "^4.7.0",
    "hi-taskcenter": "^1.0.5",
    "hi-ui": "^1.1.655",
    "lodash": "^4.17.21",
    "md5": "^2.3.0",
    "qs": "^6.10.1",
    "screenfull": "^5.1.0",
    "sortablejs": "^1.13.0",
    "vue": "^2.6.12",
    "vue-draggable-resizable": "^2.3.0",
    "vue-gemini-scrollbar": "^2.0.1",
    "vue-jstree": "^2.1.6",
    "vue-router": "^3.5.1",
    "vuex": "^3.6.2",
    "zhc-flowchart": "^1.0.7"
  },
  "devDependencies": {
    "@babel/core": "^7.14.5",
    "@babel/plugin-transform-runtime": "^7.14.5",
    "@babel/preset-env": "^7.14.5",
    "@vitejs/plugin-vue-jsx": "^1.1.5",
    "@vue/babel-plugin-transform-vue-jsx": "^1.2.1",
    "@vue/babel-preset-jsx": "^1.2.4",
    "add-asset-html-webpack-plugin": "^3.2.0",
    "autoprefixer": "^10.2.6",
    "babel-loader": "^8.2.2",
    "babel-plugin-component": "^1.1.1",
    "babel-plugin-syntax-jsx": "^6.18.0",
    "babel-plugin-transform-vite-meta-env": "^1.0.3",
    "css-loader": "^5.2.6",
    "css-minimizer-webpack-plugin": "^3.0.2",
    "dotenv": "^10.0.0",
    "file-loader": "^6.2.0",
    "html-webpack-plugin": "^5.3.2",
    "less": "^4.1.1",
    "less-loader": "^10.0.0",
    "mini-css-extract-plugin": "^1.6.1",
    "node-sass": "^4.13.0",
    "parallel-webpack": "^2.6.0",
    "postcss-import": "^14.0.2",
    "postcss-loader": "^6.1.0",
    "postcss-url": "^10.1.3",
    "rimraf": "^3.0.2",
    "sass": "^1.38.0",
    "sass-loader": "^8.0.2",
    "semver": "^5.4.1",
    "shelljs": "^0.7.8",
    "speed-measure-webpack-plugin": "^1.5.0",
    "svg-sprite-loader": "^3.5.2",
    "terser-webpack-plugin": "^5.1.4",
    "url-loader": "^4.1.1",
    "vite": "2.3.7",
    "vite-plugin-html": "^2.0.7",
    "vite-plugin-imp": "^2.0.7",
    "vite-plugin-pagedata": "^1.0.4",
    "vite-plugin-vue2": "^1.6.2",
    "vue-loader": "^15.9.7",
    "vue-style-loader": "^4.1.3",
    "vue-template-compiler": "^2.6.12",
    "webpack": "^5.40.0",
    "webpack-cli": "^4.7.2",
    "webpack-merge": "^5.8.0"
  },
  "engines": {
    "node": ">= 6.0.0",
    "npm": ">= 3.0.0"
  }
}

Ignore Space Show notes View processes.json
{ "apps": [ { "name": "vite-0000206-jwjx", "cwd": "./", "script": "./build/bin/pm2.js", "args":"--host", "log_date_format": "YYYY-MM-DD HH:mm:ss", "error_file": "./hi-vui-logs/node-app.stderr.log", "out_file": "./hi-vui-logs/node-app.stdout.log", "pid_file": "./hi-vui-logs/node-geo-api.pid", "instances": 1, "min_uptime": "60s", "max_restarts": 100000, "max_memory_restart": "512M", "watch": false, "ignore_watch": ["hi-vui-logs","eaptpl","eaptpl_backup","test","build","config","node_modules"], "merge_logs": true, "exec_interpreter": "node", "exec_mode": "cluster", "autorestart": false, "vizion": false } ] } { "apps": [ { "name": "vite-work", "cwd": "./", "script": "./build/bin/pm2.js", "args":"--host", "log_date_format": "YYYY-MM-DD HH:mm:ss", "error_file": "./hi-vui-logs/node-app.stderr.log", "out_file": "./hi-vui-logs/node-app.stdout.log", "pid_file": "./hi-vui-logs/node-geo-api.pid", "instances": 1, "min_uptime": "60s", "max_restarts": 100000, "max_memory_restart": "512M", "watch": false, "ignore_watch": ["hi-vui-logs","eaptpl","eaptpl_backup","test","build","config","node_modules"], "merge_logs": true, "exec_interpreter": "node", "exec_mode": "cluster", "autorestart": false, "vizion": false } ] }

Ignore Space Show notes View

processes.json

Show line notes below