addd

08335 / hivui-platform-template

hivui平台项目模板

Browse code addd master
1 parent 8cdc946 commit fc95d55d2c5b2b90780c9607e28b95d61886d33e caibinghong authored on 23 Mar 2022

Showing 3 changed files

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 threadLoader = require('thread-loader'); 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?cpus-1:1 });// os.cpus().length 不能开最大 // const happyThreadPool = HappyPack.ThreadPool({ size: 1 });//os.cpus().length 不能开最大 let threadCfg = { loader: "thread-loader", // 有同样配置的 loader 会共享一个 worker 池(worker pool) options: { // 产生的 worker 的数量，默认是 cpu 的核心数 // workers: Math.floor(cpus / 2) \|\| 1, // 一个 worker 进程中并行执行工作的数量 // 默认为 20 workerParallelJobs: 50, // 额外的 node.js 参数 // workerNodeArgs: ['--max-old-space-size', '1024'], // 闲置时定时删除 worker 进程 // 默认为 500ms // 可以设置为无穷大，这样在监视模式(--watch)下可以保持 worker 持续存在 poolTimeout: 2000, // 池(pool)分配给 worker 的工作数量 // 默认为 200 // 降低这个数值会降低总体的效率，但是会提升工作分布更均一 poolParallelJobs: 50, // 池(pool)的名称 // 可以修改名称来创建其余选项都一样的池(pool) // name: "my-pool" } }; let projectName = packageConfig.name == 'hi-vui-template' ? 'project' : packageConfig.name; 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', '.dvue'], alias: { 'vue$': 'vue/dist/vue.esm.js', 'vuex$': 'vuex/dist/vuex.esm.js', '@': path.resolve(__dirname, `${projectName}`), '@main': path.resolve(__dirname, `../${projectName}/hivuiMain`), // '@': path.resolve(__dirname, 'src'), '@birt':path.resolve(__dirname, `../${projectName}/hivuiBirt`), 'pinyin': 'js-pinyin', } }, 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', // use:[threadCfg,'babel-loader'] // loader: 'babel-loader', // exclude: [path.resolve(__dirname, 'node_modules')]//放开，里头有些也是可选链操作符 }, { test: /\.(vue\|dvue)$/, loader: 'vue-loader', // 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', verbose:false,//不输出日志 verboseWhenProfiling:true,//输出webpack日志 //共享进程池 threadPool: happyThreadPool, loaders: ['babel-loader'] }), 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 threadLoader = require('thread-loader'); 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?cpus-1:1 });// os.cpus().length 不能开最大 // const happyThreadPool = HappyPack.ThreadPool({ size: 1 });//os.cpus().length 不能开最大 let threadCfg = { loader: "thread-loader", // 有同样配置的 loader 会共享一个 worker 池(worker pool) options: { // 产生的 worker 的数量，默认是 cpu 的核心数 // workers: Math.floor(cpus / 2) \|\| 1, // 一个 worker 进程中并行执行工作的数量 // 默认为 20 workerParallelJobs: 50, // 额外的 node.js 参数 // workerNodeArgs: ['--max-old-space-size', '1024'], // 闲置时定时删除 worker 进程 // 默认为 500ms // 可以设置为无穷大，这样在监视模式(--watch)下可以保持 worker 持续存在 poolTimeout: 2000, // 池(pool)分配给 worker 的工作数量 // 默认为 200 // 降低这个数值会降低总体的效率，但是会提升工作分布更均一 poolParallelJobs: 50, // 池(pool)的名称 // 可以修改名称来创建其余选项都一样的池(pool) // name: "my-pool" } }; let projectName = packageConfig.name == 'hi-vui-template' ? 'project' : packageConfig.name; 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', '.dvue'], alias: { 'vue$': 'vue/dist/vue.esm.js', 'vuex$': 'vuex/dist/vuex.esm.js', '@': path.resolve(__dirname, `${projectName}`), '@main': path.resolve(__dirname, `../${projectName}/hivuiMain`), // '@': path.resolve(__dirname, 'src'), '@birt':path.resolve(__dirname, `../${projectName}/hivuiBirt`), 'pinyin': 'js-pinyin', } }, 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', // use:[threadCfg,'babel-loader'] // loader: 'babel-loader', // exclude: [path.resolve(__dirname, 'node_modules')]//放开，里头有些也是可选链操作符 }, { test: /\.(vue\|dvue)$/, loader: 'vue-loader', // 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 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 threadLoader = require('thread-loader');
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?cpus-1:1 });//         os.cpus().length  不能开最大
// const happyThreadPool = HappyPack.ThreadPool({ size: 1 });//os.cpus().length  不能开最大

let threadCfg = {
  loader: "thread-loader",
  // 有同样配置的 loader 会共享一个 worker 池(worker pool)
  options: {
    // 产生的 worker 的数量，默认是 cpu 的核心数
    // workers: Math.floor(cpus / 2) || 1,
    // 一个 worker 进程中并行执行工作的数量
    // 默认为 20
    workerParallelJobs: 50,
    // 额外的 node.js 参数
    // workerNodeArgs: ['--max-old-space-size', '1024'],
    // 闲置时定时删除 worker 进程
    // 默认为 500ms
    // 可以设置为无穷大， 这样在监视模式(--watch)下可以保持 worker 持续存在
    poolTimeout: 2000,
    // 池(pool)分配给 worker 的工作数量
    // 默认为 200
    // 降低这个数值会降低总体的效率，但是会提升工作分布更均一
    poolParallelJobs: 50,
    // 池(pool)的名称
    // 可以修改名称来创建其余选项都一样的池(pool)
    // name: "my-pool"
  }
};

let projectName = packageConfig.name == 'hi-vui-template' ? 'project' : packageConfig.name;
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', '.dvue'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      'vuex$': 'vuex/dist/vuex.esm.js',
      '@': path.resolve(__dirname, `${projectName}`),
      '@main': path.resolve(__dirname, `../${projectName}/hivuiMain`),
      // '@': path.resolve(__dirname, 'src'),
      '@birt':path.resolve(__dirname, `../${projectName}/hivuiBirt`),
      'pinyin': 'js-pinyin',
    }
  },
  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',
        // use:[threadCfg,'babel-loader']
        // loader: 'babel-loader',
        // exclude: [path.resolve(__dirname, 'node_modules')]//放开，里头有些也是 可选链操作符
      },
      {
        test: /\.(vue|dvue)$/,
        loader: 'vue-loader',
        // 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',
      verbose:false,//不输出日志
      verboseWhenProfiling:true,//输出webpack日志
      //共享进程池
      threadPool: happyThreadPool,
      loaders: ['babel-loader']
    }),
    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')

}
    }
  },
  plugins: [
    new VueLoaderPlugin(),
    new HappyPack({
      id: 'happy_js_jsx',
      //共享进程池
      threadPool: happyThreadPool,
      loaders: ['babel-loader']
    }),
    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.get-list.js
const path = require("path"); const fs = require("fs"); // const {Chalk} = require('chalk') const merge = require('webpack-merge'); const webpack = require('webpack'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const CleanWebpackPlugin = require('clean-webpack-plugin'); const MiniCssExtractPlugin = require("mini-css-extract-plugin"); const baseWebpackConfig = require('./webpack.base.conf'); const packageConfig = require('../package.json'); // console.log('---------------------webpack.get-list.js------------', process.env.NODE_ENV) // 用来记录当前打包的模块路径列表，判断进程参数 let argvs = (process.argv[2] \|\| "").replace(/\s$/g, "") let moduleList = require('./webpack.get-module').moduleList \|\| []; if(argvs){ // console.log('指定模块编译：') moduleList = argvs.split(',') } let evnConfig = require('./getEnvVar') let webpackList = []; //构建webpack 配置 for (let i = 0, l = moduleList.length; i < l; i++) { let MODULE = moduleList[i]; // console.log(i, MODULE); //添加每个模块的webpack 配置 let MODULE_NAME = MODULE.split('/').pop(); let entry = {}; let outputPath = path.resolve(__dirname, '../dist', MODULE) entry[MODULE_NAME] = ['babel-polyfill', `${MODULE}/index.js`];// @babel/polyfill let wpk = merge({ mode: 'production', // mode: 'development', // devtool: 'source-map', }, baseWebpackConfig, { entry: entry, output: { path: outputPath, filename: `static/js/[name].js`, // publicPath:'./' // publicPath: `/${evnConfig.VITE_APP_SERVER.replace(/"/gi,"")}/render/${packageConfig.author}/${MODULE.replace('./', '')}/` publicPath: `${evnConfig.VITE_APP_USERPATH.replace(/"/gi,"")}/${MODULE.replace('./', '')}/` } }); let htmlTemplate = `${MODULE}/index.html` var checkPath = fs.existsSync(htmlTemplate); //如果目录存在返回 true ，如果目录不存在返回false if (checkPath == false) { htmlTemplate = path.resolve(__dirname, './template.html') } wpk.plugins.push(new CleanWebpackPlugin([outputPath], { root: path.resolve(__dirname, '../'), //根目录 //其他配置按需求添加 verbose: false,//不提示删除 })); wpk.plugins.push( new MiniCssExtractPlugin({ filename: 'static/css/[name].[contenthash].css', chunkFilename: `static/css/[name].[contenthash].css` }) ); wpk.plugins.push( new HtmlWebpackPlugin({ filename: path.resolve(__dirname, '../dist', MODULE, 'index.html'), template: htmlTemplate,//如果html 不存在考虑用全局根目录下 inject: true, minify: { removeComments: true,//去除注释 collapseWhitespace: true,//是否去除空格 removeAttributeQuotes: true//去除空属性 }, compile: true })) webpackList.push(wpk); } module.exports = webpackList;// [webpackList[4]] ////[webpackList[3]];//27 const path = require("path"); const fs = require("fs"); // const {Chalk} = require('chalk') const merge = require('webpack-merge'); const webpack = require('webpack'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const CleanWebpackPlugin = require('clean-webpack-plugin'); const MiniCssExtractPlugin = require("mini-css-extract-plugin"); const baseWebpackConfig = require('./webpack.base.conf'); const packageConfig = require('../package.json'); // console.log('---------------------webpack.get-list.js------------', process.env.NODE_ENV) // 用来记录当前打包的模块路径列表，判断进程参数 let argvs = (process.argv[2] \|\| "").replace(/\s$/g, "") let moduleList = require('./webpack.get-module').moduleList \|\| []; if(argvs){ // console.log('指定模块编译：') moduleList = argvs.split(',') } let evnConfig = require('./getEnvVar') let webpackList = []; //构建webpack 配置 for (let i = 0, l = moduleList.length; i < l; i++) { let MODULE = moduleList[i]; // console.log(i, MODULE); //添加每个模块的webpack 配置 let MODULE_NAME = MODULE.split('/').pop(); let entry = {}; let outputPath = path.resolve(__dirname, '../dist', MODULE) entry[MODULE_NAME] = ['babel-polyfill', `${MODULE}/index.js`];// @babel/polyfill let wpk = merge({ mode: 'production', // mode: 'development', // devtool: 'source-map', }, baseWebpackConfig, { entry: entry, output: { path: outputPath, filename: `static/js/[name].js`, // publicPath:'./' // publicPath: `/${evnConfig.VITE_APP_SERVER.replace(/"/gi,"")}/render/${packageConfig.author}/${MODULE.replace('./', '')}/` publicPath: `${evnConfig.VITE_APP_USERPATH.replace(/"/gi,"")}/${MODULE.replace('./', '')}/` } }); let htmlTemplate = `${MODULE}/index.html` var checkPath = fs.existsSync(htmlTemplate); //如果目录存在返回 true ，如果目录不存在返回false if (checkPath == false) { htmlTemplate = path.resolve(__dirname, './template.html') } wpk.plugins.push(new CleanWebpackPlugin([outputPath], { root: path.resolve(__dirname, '../'), //根目录 //其他配置按需求添加 })); wpk.plugins.push( new MiniCssExtractPlugin({ filename: 'static/css/[name].[contenthash].css', chunkFilename: `static/css/[name].[contenthash].css` }) ); wpk.plugins.push( new HtmlWebpackPlugin({ filename: path.resolve(__dirname, '../dist', MODULE, 'index.html'), template: htmlTemplate,//如果html 不存在考虑用全局根目录下 inject: true, minify: { removeComments: true,//去除注释 collapseWhitespace: true,//是否去除空格 removeAttributeQuotes: true//去除空属性 }, compile: true })) webpackList.push(wpk); } module.exports = webpackList;// [webpackList[4]] ////[webpackList[3]];//27

Ignore Space Show notes View

build/webpack.get-list.js

const path = require("path");
const fs = require("fs");
// const {Chalk} = require('chalk')
const merge = require('webpack-merge');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const baseWebpackConfig = require('./webpack.base.conf');

const packageConfig = require('../package.json');
// console.log('---------------------webpack.get-list.js------------', process.env.NODE_ENV)

// 用来记录当前打包的模块路径列表，判断进程参数
let argvs = (process.argv[2] || "").replace(/\s*$/g, "")
let moduleList = require('./webpack.get-module').moduleList || [];
if(argvs){
  // console.log('指定模块编译：')
  moduleList = argvs.split(',')
}

let evnConfig = require('./getEnvVar')

module.exports = webpackList;// [webpackList[4]] ////[webpackList[3]];//27

const packageConfig = require('../package.json');
// console.log('---------------------webpack.get-list.js------------', process.env.NODE_ENV)

let evnConfig = require('./getEnvVar')

module.exports = webpackList;// [webpackList[4]] ////[webpackList[3]];//27

Ignore Space Show notes View build/webpack.prod.conf.js
// 多进程编译所有 //parallel-webpack允许您并行运行多个Webpack构建,从而将工作分散到各个处理器上,从而有助于显着加快构建速度 // const os = require('os'); // const cpus = os.cpus().length; // console.log(cpus, ' Math.floor(cpus/2)\|\|1', Math.floor(cpus / 2) \|\| 1) const chalk = require('chalk') let webpack = require('webpack') let argvs = (process.argv[2] \|\| "").replace(/\s$/g, ""); let moduleList = argvs != "" ? argvs.split(',') : []; let len = moduleList.length; let startTime = new Date().valueOf(); let timerCtl = setInterval(function(){ console.log(chalk.green(`正在编译中，目前已消耗 ${(new Date().valueOf() - startTime) / 1000} 秒=====`)) },100010); //----------- 【一般编译，按参数，一个接一个的】 --------------- function DoWebpackBuild(list, start, total,step = 100) { let wpkCfg, isEndAll = false; if(list==null\|\|list.length==0){ console.log(chalk.yellow(`没有模块可编译！`)); clearInterval(timerCtl); return; } // wpkCfg = list[start]; wpkCfg = list.slice(start,start+step); if (wpkCfg == null\|\|wpkCfg.length==0) { isEndAll = true; clearInterval(timerCtl); console.log(chalk.green(`消耗 ${(new Date().valueOf() - startTime) / 1000} 秒`)); return; } console.log('**************************************************************\n'); console.log(`【进度 ${start}/${total} 】,正在编译${start} - ${total<step?total:step}之间的模块...\n`); console.log('*************************************************************\n'); webpack(wpkCfg, (err, stats) => { //这个回调一定要写，不然打包不出来 if (err \|\| stats.hasErrors()) {//编译错误不在 err 对象内，而是需要使用 stats.hasErrors() 单独处理 let info = {}; try { info = stats.toJson(); } catch (e) { info = { errors: [] }; console.log('stats.toJson()', err, stats) } // 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]) } } // 处理完成 if (isEndAll) { clearInterval(timerCtl); console.log(chalk.green(`消耗 ${(new Date().valueOf() - startTime) / 1000} 秒`)); }else{ DoWebpackBuild(list, start + step, total); } }); } if (len == 0) { //-------- 【用parallel-webpack，全部编译情况下】 ------------ / moduleList = require('./webpack.get-module').moduleList \|\| []; console.log(`=========进入全模块编译状态(${moduleList.length})模块...=============`) var run = require('parallel-webpack').run; run( require.resolve('./webpack.get-list.js'), { watch: false, maxRetries: 1, stats: false, // defaults to false maxConcurrentWorkers: 1,// use 2 workers cup个数 argv: [argvs] }, ()=>{ //多打包时，如果其中一个模块出错，不知道是哪个模块 console.log('\n--------编译完成------- \n'); }); / let webpackList = require('./webpack.get-list.js'); len = webpackList.length; console.log(`【编译所有共${len}】=====================\n`) DoWebpackBuild(webpackList, 0, len);//, 0, len //以上两种时间上差不多 20s } else { let webpackList = require('./webpack.get-list.js'); len = webpackList.length; console.log(`【按需编译共${len}】=====================\n`) DoWebpackBuild(webpackList, 0, len)//, 0, len } // 多进程编译所有 //parallel-webpack允许您并行运行多个Webpack构建,从而将工作分散到各个处理器上,从而有助于显着加快构建速度 // const os = require('os'); // const cpus = os.cpus().length; // console.log(cpus, ' Math.floor(cpus/2)\|\|1', Math.floor(cpus / 2) \|\| 1) const chalk = require('chalk') let webpack = require('webpack') let argvs = (process.argv[2] \|\| "").replace(/\s$/g, ""); let moduleList = argvs != "" ? argvs.split(',') : []; let len = moduleList.length; let startTime = new Date().valueOf(); //----------- 【一般编译，按参数，一个接一个的】 --------------- function DoWebpackBuild(list, i, l) { let wpkCfg, step = 1, isAll = false; if (i == null && l == null) { //------------ 【webpack 一口气编译指定的所有功能】 -------------- isAll = true; wpkCfg = list; } else { wpkCfg = list[i]; if (wpkCfg == null) { console.log(chalk.green(`消耗 ${(new Date().valueOf() - startTime) / 1000} 秒`)); return; } console.log(chalk.yellow(`进度 ${i + 1}/${l} ,正在编译${wpkCfg.output.path}\n`)); } webpack(wpkCfg, (err, stats) => { //这个回调一定要写，不然打包不出来 if (err \|\| stats.hasErrors()) {//编译错误不在 err 对象内，而是需要使用 stats.hasErrors() 单独处理 let info = {}; try { info = stats.toJson(); } catch (e) { info = { errors: [] }; console.log('stats.toJson()', err, stats) } // 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]) } } // 处理完成 if (isAll) { console.log(chalk.green(`消耗 ${(new Date().valueOf() - startTime) / 1000} 秒`)); } isAll == false && DoWebpackBuild(list, i + step, l); }); } if (len == 0) { //-------- 【用parallel-webpack，全部编译情况下】 ------------ /* moduleList = require('./webpack.get-module').moduleList \|\| []; console.log(`=========进入全模块编译状态(${moduleList.length})模块...=============`) var run = require('parallel-webpack').run; run( require.resolve('./webpack.get-list.js'), { watch: false, maxRetries: 1, stats: false, // defaults to false maxConcurrentWorkers: 1,// use 2 workers cup个数 argv: [argvs] }, ()=>{ //多打包时，如果其中一个模块出错，不知道是哪个模块 console.log('\n--------编译完成------- \n'); }); */ let webpackList = require('./webpack.get-list.js'); len = webpackList.length; console.log(`【编译所有】共${len}个=====================\n`) DoWebpackBuild(webpackList);//, 0, len //以上两种时间上差不多 20s } else { let webpackList = require('./webpack.get-list.js'); len = webpackList.length; console.log(`【按需编译】共${len}个=====================\n`) DoWebpackBuild(webpackList)//, 0, len }

Ignore Space Show notes View

build/webpack.prod.conf.js

webpack(wpkCfg, (err, stats) => {
    //这个回调一定要写，不然打包不出来
    if (err || stats.hasErrors()) {//编译错误不在 err 对象内，而是需要使用 stats.hasErrors() 单独处理
      let info = {};
      try {
        info = stats.toJson();
      } catch (e) {
        info = {
          errors: []
        };
        console.log('stats.toJson()', err, stats)
      }
      // 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])
      }
    }
    // 处理完成
    if (isEndAll) {
      clearInterval(timerCtl);
      console.log(chalk.green(`消耗 ${(new Date().valueOf() - startTime) / 1000} 秒`));
    }else{
      DoWebpackBuild(list, start + step, total);
    }
  });
}

if (len == 0) {
  //-------- 【用parallel-webpack，全部编译情况下】 ------------
  /*
  moduleList = require('./webpack.get-module').moduleList || [];
  console.log(`=========进入全模块编译状态(${moduleList.length})模块...=============`)
  var run = require('parallel-webpack').run;
  run(
    require.resolve('./webpack.get-list.js'), 
    {
      watch: false,
      maxRetries: 1,
      stats: false, // defaults to false
      maxConcurrentWorkers: 1,// use 2 workers  cup个数
      argv: [argvs]
    }, ()=>{
      //多打包时，如果其中一个模块出错，不知道是哪个模块
      console.log('\n--------编译完成------- \n');
    });
  */
  let webpackList = require('./webpack.get-list.js');
  len = webpackList.length;
  console.log(`【编译所有 共${len}】=====================\n`)
  DoWebpackBuild(webpackList, 0, len);//, 0, len
  //以上两种时间上差不多   20s
} else {
  let webpackList = require('./webpack.get-list.js');
  len = webpackList.length;
  console.log(`【按需编译 共${len}】=====================\n`)
  DoWebpackBuild(webpackList, 0, len)//, 0, len
}

// 多进程 编译所有
//parallel-webpack允许您并行运行多个Webpack构建,从而将工作分散到各个处理器上,从而有助于显着加快构建速度
// const os = require('os');
// const cpus = os.cpus().length;
// console.log(cpus, ' Math.floor(cpus/2)||1', Math.floor(cpus / 2) || 1)
const chalk = require('chalk')
let webpack = require('webpack')
let argvs = (process.argv[2] || "").replace(/\s*$/g, "");
let moduleList = argvs != "" ? argvs.split(',') : [];
let len = moduleList.length;
let startTime = new Date().valueOf();
//----------- 【一般编译，按参数，一个接一个的】 ---------------
function DoWebpackBuild(list, i, l) {
  let wpkCfg, step = 1, isAll = false;
  if (i == null && l == null) {
    //------------ 【webpack 一口气编译指定的所有功能】 -------------- 
    isAll = true;
    wpkCfg = list;
  } else {
    wpkCfg = list[i];
    if (wpkCfg == null) {
      console.log(chalk.green(`消耗 ${(new Date().valueOf() - startTime) / 1000} 秒`));
      return;
    }
    console.log(chalk.yellow(`进度 ${i + 1}/${l} ,正在编译${wpkCfg.output.path}\n`));
  }
  webpack(wpkCfg, (err, stats) => {
    //这个回调一定要写，不然打包不出来
    if (err || stats.hasErrors()) {//编译错误不在 err 对象内，而是需要使用 stats.hasErrors() 单独处理
      let info = {};
      try {
        info = stats.toJson();
      } catch (e) {
        info = {
          errors: []
        };
        console.log('stats.toJson()', err, stats)
      }
      // 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])
      }
    }
    // 处理完成
    if (isAll) {
      console.log(chalk.green(`消耗 ${(new Date().valueOf() - startTime) / 1000} 秒`));
    }
    isAll == false && DoWebpackBuild(list, i + step, l);
  });
}

if (len == 0) {
  //-------- 【用parallel-webpack，全部编译情况下】 ------------
  /*
  moduleList = require('./webpack.get-module').moduleList || [];
  console.log(`=========进入全模块编译状态(${moduleList.length})模块...=============`)
  var run = require('parallel-webpack').run;
  run(
    require.resolve('./webpack.get-list.js'), 
    {
      watch: false,
      maxRetries: 1,
      stats: false, // defaults to false
      maxConcurrentWorkers: 1,// use 2 workers  cup个数
      argv: [argvs]
    }, ()=>{
      //多打包时，如果其中一个模块出错，不知道是哪个模块
      console.log('\n--------编译完成------- \n');
    });
  */
  let webpackList = require('./webpack.get-list.js');
  len = webpackList.length;
  console.log(`【编译所有】共${len}个=====================\n`)
  DoWebpackBuild(webpackList);//, 0, len
  //以上两种时间上差不多   20s
} else {
  let webpackList = require('./webpack.get-list.js');
  len = webpackList.length;
  console.log(`【按需编译】共${len}个=====================\n`)
  DoWebpackBuild(webpackList)//, 0, len
}

Show line notes below