webpack打包

背景

在我们项目开发中，vue-cli配置好的一些简单的打包命令往往都无法满足我们的需求。不同环境下的请求路径，api的版本，所在的平台等等。在这个情况下， 我们急需可以自定义去配置一些全局的参数提供项目中使用。这时候我们就想到了可以从打包命令下手，通过传递不同的参数，并且对这些参数处理之后挂载到全局，去解决我们的问题。我们在项目的的打包命令中做了很多次的修改优化和迭代，下面讲速一下我们最新打包命令配置的思路。

传参

打包命令时通过 -- 向下指向process.argv传参，我们是通过键名去匹配键值，提高配置的实用性，降低耦合，通用于各个项目中。eg： npm run serve -- --键名=键值

开启多个监听服务

使用插件concurrently（npm install concurrently --save） npm script命令同时开启多个监听服务 build-serve-concurrently.js

// 统一输出打包命令
const concurrently = require('concurrently')
let arr = process.argv.filter((itm, idx) => idx > 1)

let env = 'development' // 不传参数默认为dev环境
let cmd = '' // 运行命令
let platform = ['mp-weixin', 'mp-toutiao', 'mp-baidu', 'h5'] // 默认打包平台参数
let concurrentlyArr = []
let str = arr.join(' ')

arr.forEach((item) => {
  item = item.slice(2)
  let platArr = item.split('=')
  switch (platArr[0]) {
     case 'env':
      cmd = !platArr[1].includes('dev') && !platArr[1].includes('prod') ? cmd = `mode ${platArr[1]}` : ''
      env = platArr[1].includes('prod') ? 'production' : 'development'
      break
    // 平台配置命令
    case 'platform':
      let value = platArr[1].split(',')
      // 打包命令，打包platform传入的平台，可传多个用逗号隔开
      concurrentlyArr = value.map((child) => {
        return `cross-env NODE_ENV=${env} UNI_PLATFORM=${child} vue-cli-service ${cmd} uni-build --watch ${str}`
      })
    default:
      break
  }
})
 // 打包命令，默认打包四个平台
concurrentlyArr = !concurrentlyArr.length ? platform.map((child) => {
  return `cross-env NODE_ENV=${env} UNI_PLATFORM=${child} vue-cli-service ${cmd} uni-build --watch ${str}`
}) : concurrentlyArr

concurrently(concurrentlyArr)

环境（--env）

环境参数，常用值有 local本地，dev研发， release测试， prod线上正式 eg： --env=release

vue/cli3.0之后环境变量可以在本地文件中新建一个对应的.env.release(环境名称) 定义一个VUE_APP_ENV对应的环境参数，原框架中只有development和production环境，设置了VUE_APP_ENV打包命令时传入mode release 就会自动识别混淆入 process.env中，在.env.文件名 文件中还可以定义一些全局不需要变动的参数，可以直接通过process.env获取

平台（--platform）

我们的命令中配置了默认打包四个平台（百度mp-baidu，微信mp-weixin，头条mp-toutiao，h5），--platform=xxx可自定义打包指定的平台，可传入多个用，隔开，可以自由的切换自己想要并线打包的平台 eg： --platform=mp-weixin,mp-toutiao，更多平台参数可以查看

版本（--version）

在我们开发中，为了并线，小程序的发布，急需到多个版本的api进行支持，那么版本的配置对我们来说就显得尤为急需。默认状态下我们是选择打包无版本。版本可以通过键值自定义传入，既方便了我们开发时的各种场景，又可以避免固定化的参数配置的局限性 eg: --version=v1

自定义参数拓展

在配置文件中可以在命令中传入任意参数，传入的参数将会以全大写的方式挂载在全局，我们可以在开发时的任意位置直接获取到我们想要的参数。可以运用于sass多平台配置等业务场景中

比如版本 console.log(VERSION) --> 打印出 release

全局注入参数

vue/cli3.0以上

在vue.config.js文件中配置第三方插件全局注入参数 new webpack.DefinePlugin()

const webpack = require('webpack')
const VERSION_NAME = 'version' // 版本
let param = infoVersion(process.argv)
// 第三方插件全局注入参数
var definePlugin = new webpack.DefinePlugin(param)

module.exports = {
  css: {
    loaderOptions: {
      // 给 stylus-loader 传递选项
      stylus: {
        import: [
          '~@/design/variable.styl',
          '~@/design/mixin.styl'
        ]
      }
    }
  },
  configureWebpack: { // 第三方插件配置
    plugins: [
      definePlugin
    ]
  }
}

// 处理自定义参数
function infoVersion(arr, type) {
  let value = {}
  arr.forEach((item) => {
    item = item.slice(2).split('=')
    if (item.length > 1) {
      let str = item[0] === VERSION_NAME ? '/' + item[1] : item[1]
      value[item[0].toUpperCase()] = JSON.stringify(str)
    }
  })
  return value
}

vue/cli3.0以下

在build/webpack.base.conf.js文件中配置第三方插件全局注入参数 new webpack.DefinePlugin()

可通过获取参数传入的，process.argv

总结

框架的打包配置尽量降低与业务的耦合性，提高拓展性。尽可能保证输出的框架是一个架子，可以由不同的业务场景进行拓展，而不是跟着业务跑，当业务需求新增修改时框架将也会需要跟着大幅度的修改。 将会大大提高开发的成本。