Vue 多模块同时打包

Posted 2020-11-22 front-969376855

build.js文件 增加

process.env.NODE_ENV = ‘production‘
‘use strict‘
require(‘./check-versions‘)()
// MODULE_ENV用来记录当前打包的模块名称
process.env.MODULE_ENV = process.argv[2]
// MODE_ENV用来记录当前打包的模式，total代表整体打包（静态资源在同一个目录下，可以复用重复的文件），separate代表分开打包（静态资源按模块名称分别独立打包，不能复用重复的文件）
process.env.MODE_ENV = process.argv[3]

// 如果有传参时，对传入的参数进行检测，如果参数非法，那么停止打包操作
const checkModule = require(‘./module-conf‘).checkModule
if (process.env.MODULE_ENV !== ‘undefined‘ && !checkModule()) {
  return
}

　修改config/index.js　

build: {
    // Template for index.html
  
    index: path.resolve(__dirname, ‘../‘+（打包存放文件）MODULE+‘_file/‘+(MODULE?MODULE:envConfig.module[0])+‘/index.html‘),
    


    // Paths
     // 这里判断一下打包的模式，如果是分开打包，要把成果物放到以模块命名的文件夹中
    assetsRoot: process.env.MODE_ENV === ‘separate‘ ? path.resolve(__dirname, ‘../‘+MODULE+‘_file/‘,(MODULE?MODULE:envConfig.module[0])) : path.resolve(__dirname, ‘../‘+MODULE+‘_file/‘),
    assetsSubDirectory: ‘static‘,
    assetsPublicPath: ‘/‘+MODULE+‘/‘,
    /**
     * Source Maps
     */

    productionSourceMap: true,
    // https://webpack.js.org/configuration/devtool/#production
    devtool: ‘#source-map‘,

    // Gzip off by default as many popular static hosts such as
    // Surge or Netlify already gzip all static assets for you.
    // Before setting to `true`, make sure to:
    // npm install --save-dev compression-webpack-plugin
    productionGzip: false,
    productionGzipExtensions: [‘js‘, ‘css‘],

    // Run the build command with an extra argument to
    // View the bundle analyzer report after build finishes:
    // `npm run build --report`
    // Set to `true` or `false` to always turn it on or off
    bundleAnalyzerReport: process.env.npm_config_report
  }

 

 

build文件夹里面添加一个build-all.js

const path = require(‘path‘)
const execFileSync = require(‘child_process‘).execFileSync;
const moduleList = require(‘./module-conf‘).moduleList || []
const buildFile = path.join(__dirname, ‘build.js‘)
const envConfig=require(‘../env.config‘)  //变量配置

for( const module of moduleList ){
  console.log(‘正在打包：‘+module)
// //   // 异步执行构建文件，并传入两个参数，module：当前打包模块，separate：当前打包模式（分开打包）
  execFileSync( ‘node‘, [buildFile, module, ‘separate‘], {})
}

build文件夹里面添加一个module-conf.js

var chalk = require(‘chalk‘)
var glob = require(‘glob‘)

// 获取所有的moduleList
var moduleList = []
var moduleSrcArray = glob.sync(‘./src/view/*‘)
for(var x in moduleSrcArray){
  moduleList.push(moduleSrcArray[x].split(‘/‘)[3])
}
// 检测是否在输入的参数是否在允许的list中
var checkModule = function () {
  var module = process.env.MODULE_ENV
  // 检查moduleList是否有重复
  var hash = {}
  var repeatList = []
  for(var l = 0;l < moduleList.length; l++){
    if(hash[moduleList[l]]){
      repeatList.push(moduleList[l])
    }
    hash[moduleList[l]] = true
  }
  if(repeatList.length > 0){
    console.log(chalk.red(‘moduleList 有重复：‘))
    console.log(chalk.red(repeatList.toString()))
    return false
  }
  let result = true
  let illegalParam = ‘‘
  for (let moduleToBuild of module.split(‘,‘)) {
    if (moduleList.indexOf(moduleToBuild) === -1) {
      result = false
      illegalParam = moduleToBuild
      break
    }
  }
  if(result === false){
    console.log(chalk.red(‘参数错误，允许的参数为：‘))
    console.log(chalk.green(moduleList.toString()))
    console.log(chalk.yellow(`非法参数：${illegalParam}`))
  }
  return result
}

// 获取当前要打包的模块列表
function getModuleToBuild () {
  let moduleToBuild = []
  if (process.env.NODE_ENV === ‘production‘) {
    /* 部署态，构建要打包的模块列表，如果指定了要打包的模块，那么按照指定的模块配置入口
     *  这里有个特性，即使参数未传，那么获取到的undefined也是字符串类型的，不是undefined类型
     * */
    if (process.env.MODULE_ENV !== ‘undefined‘) {
      moduleToBuild = process.env.MODULE_ENV.split(‘,‘)
    } else {
      // 如果未指定要打包的模块，那么打包所有模块
      moduleToBuild = moduleList
    }
  } else {
    // 开发态，获取所有的模块列表
    moduleToBuild = moduleList
  }
  return moduleToBuild
}

exports.moduleList = moduleList
exports.checkModule = checkModule
exports.getModuleToBuild = getModuleToBuild

 

webpack.base.conf.js修改目录配置

resolve: {
    extensions: [‘.js‘, ‘.vue‘, ‘.json‘ , ‘less‘],
    alias: {
      ‘vue$‘: ‘vue/dist/vue.esm.js‘,
      ‘@‘: resolve(‘src‘),
      ‘module‘:resolve(‘src/view/‘+MODULE),
    
      ‘static‘:resolve(‘static‘),
      ‘base‘:resolve(‘‘),
      // ‘module_name‘:MODULE,
    }
  },

 

package.json新增 "build-all": "node build/build-all.js"

"scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "build": "node build/build.js",
    "build-all": "node build/build-all.js"
  },