webpack命令行传参,进行条件编译

    • 使用npm包cross-env
      • 安装
      • 命令行示例
      • node环境变量赋到全局
      • 使用全局变量业务示例
    • process.argv

使用npm包cross-env

cross-env原本是用于跨平台的命令的。在执行webpack命令之前写上 cross-env name=value即可配置,那么即可通过process.env.name来访问这个变量。

安装

npm i -D cross-env

命令行示例

在package.json文件中写上

  "scripts": {
    ...
    "startMobile": "cross-env PLATFORM=MOBILE npm run dev",
    "startPc": "cross-env PLATFORM=PC npm run dev",
    ...
    "buildMobile": "cross-env PLATFORM=MOBILE node build/build.js",
    "buildPc": "cross-env PLATFORM=PC node build/build.js"
  }

node环境变量赋到全局

  1. 通过process.env去获取node环境变量。
  2. 根据测试,命令行定义的变量,只有node执行的js代码才能从环境获取到定义的变量。
  3. 在常规业务代码中如果想要获取该变量值,则无能为力。所以需要借助webpack.DefinePlugin定义全局变量,使常规业务代码也能访问到。

此处将全局变量统一处理到parameters.js文件。

// config目录下parameters.js
module.exports = {
  PLATFORM: JSON.stringify(process.env.PLATFORM) 
}
// 确保你的变量值是用 JSON.stringify转换的,或者是 '"parameter"'这种形式,打包的时候会把PLATFORM全局变量替换成 "parameter" 。所以,双引号需要保留

在prod.env.js文件中写入

'use strict'
const parameters = require('./parameters')
module.exports = {
  NODE_ENV: '"production"',
  ...parameters
}

在dev.env.js文件写入

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')
const parameters = require('./parameters')

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  ...parameters
})

webpack.DefinePlugin位置(无需修改,维持原样)

// webpack.prod.conf.js文件
...
const env = process.env.NODE_ENV === 'testing'
  ? require('../config/test.env')
  : require('../config/prod.env')
...
new webpack.DefinePlugin({
  'process.env': env
})

// webpack.dev.conf.js文件
new webpack.DefinePlugin({
  'process.env': require('../config/dev.env')
})

使用全局变量业务示例

/**
 * 判断是否为手机端环境
 */
const isMobileEnv = process.env.PLATFORM === 'MOBILE'

process.argv

注:目前测试可在编译命令行中添加使用。基于webpack启动项目命令行无法使用

  "scripts": {
	....
    "buildMobile": "node build/build.js PLATFORM=MOBILE",
    "buildPc": "node build/build.js PLATFORM=PC",
    ....
  },

同上parameters.js文件

console.log('process.argv', process.argv)
// process.argv [ 'C:\\Program Files\\nodejs\\node.exe',
// 'D:\\project\\company\\zhengping\\h5\\build\\build.js',
// 'PLATFORM=MOBILE' ]

const matchedPlatform = process.argv.filter(arg => {
  if (arg.match(/PLATFORM=.+/ig)) {
    return arg
  }
})
module.exports = {
  PLATFORM: matchedPlatform[0] ? JSON.stringify(matchedPlatform[0].split('=')[1]) : '"MOBILE"'
}

其他文件修改同上一用法

你可能感兴趣的:(Webpack)