宅小歪前端攻城师Mobile Debug作者

demo中展示的是获取自定义参数 --channel 以及package.json中的version信息,并按照channel信息编译输出到不同的dist文件夹

1.配置package.json,给scripts添加自定义参数    

{
  "name": "webpack-get-custom-arg-and-packagejson-data",
  "version": "1.2.3",
  "description": "Using JS to get custom arguments and package.json data in webpack.",
  "main": "main.js",
  "scripts": {
    "build_dev_channel_gamesdk": "webpack --config ./config/webpack.config.js --mode development --channel gamesdk",
    "build_dev_channel_default": "webpack --config ./config/webpack.config.js --mode development",
    "build_pro_channel_gamesdk": "webpack --config ./config/webpack.config.js --mode production --channel gamesdk",
    "build_pro_channel_default": "webpack --config ./config/webpack.config.js --mode production"
  },
  "keywords": [
    "webpack",
    "package.json",
    "arguments"
  ],
  "author": "zhaixiaowai",
  "license": "MIT",
  "devDependencies": {
    "@babel/core": "^7.4.0",
    "babel-loader": "^8.0.6",
    "webpack": "^4.41.6",
    "webpack-cli": "^3.3.11"
  }
}

2.配置--config对应的 webpack.config.js文件

2.1引入 fs和webpack模块

var webpack = require('webpack');    
var fs = require("fs");

2.2修改 module.exports,使用function方式return配置,用来获取argv相关参数

module.exports = (env, argv) => { 
    console.log(argv);
};

2.3通过webpack.DefinePlugin将静态参数传入到js文件中以便允许js获取,请注意获取到的arg参数使用JSON.stringify包裹,否则如果传递的是字符串会因为丢失引号而导致js运行出错.

...
plugins: [    
    new webpack.DefinePlugin({    
    _SDK_CHANNEL: JSON.stringify(channel)    
    }),    
    new webpack.DefinePlugin({    
    _SDK_VERSION: JSON.stringify(packVersion)    
    })    
],
...

2.4通过fs获取package.json文件数据并获取version

/**    
 * get package.json version    
 */    
function getPackageVersion(){    
    const pkgPath = path.join(__dirname, '../package.json');    
    const pkgData = JSON.parse(fs.readFileSync(pkgPath));    
    return pkgData.version;    
}

完整的demo的webpack.config.js内容为

const path = require('path');    
var webpack = require('webpack');    
var fs = require("fs");    
/**    
 * get package.json version    
 */    
function getPackageVersion(){    
    const pkgPath = path.join(__dirname, '../package.json');    
    const pkgData = JSON.parse(fs.readFileSync(pkgPath));    
    return pkgData.version;    
}    
module.exports = (env, argv) => {     
    const channel = argv.channel;    
    let output_fold;    
    const mode = argv.mode || "production";    
    switch(channel){    
        case "gamesdk":{    
            output_fold = channel;    
            break;    
        }    
        default:{    
            output_fold = "default";    
            break;    
        }    
    }    
    const packVersion = getPackageVersion();    
    return  {    
        entry: [path.resolve(__dirname, '../src/main.js')],    
        output: {    
            //library: "zhaixiaowai",    
            //libraryTarget: "var",    
            filename: `../dist/${output_fold}/demo-${mode}.js`,    
            path: path.resolve(__dirname, '')    
        },    
        module: {    
            rules: [    
                {    
                    test: /\.js$/,    
                    exclude: /node_modules|bower_components/,    
                    use: {    
                        loader: 'babel-loader'    
                    }    
                }    
            ]    
        },    
        plugins: [    
            new webpack.DefinePlugin({    
                _SDK_CHANNEL: JSON.stringify(channel)    
            }),    
            new webpack.DefinePlugin({    
                _SDK_VERSION: JSON.stringify(packVersion)    
            })    
        ],    
        resolve: {    
            extensions: ['.js'],    
            alias: {    
            }    
        },    
        mode: "production"    
    };    
};

3.在js中获取参数变量,并根据传入的参数配置相关信息.

/**是否处于开发模式 */    
export const IS_DEV = typeof process!=="undefined" && process.env.NODE_ENV !== 'production';    
/**自定义参数 渠道标识 */    
export const SDK_CHANNEL = typeof _SDK_CHANNEL==="string" ? _SDK_CHANNEL : "jssdk";    
/**package.json 版本号 */    
export const SDK_VERSION = typeof _SDK_VERSION==="string" ? _SDK_VERSION : "1.0.0";    
/**域名分配 */    
export const DOMAINS = {    
    API:undefined,    
    RES:undefined,    
};    
switch(SDK_CHANNEL){    
    case "gamesdk":{    
        DOMAINS.API = "//gamesdkapi.zhaixiaowai.com/";    
        DOMAINS.RES = "//gamesdkres.zhaixiaowai.com/";    
        break;    
    }    
    default:{            
        DOMAINS.API = "//api.zhaixiaowai.com/";    
        DOMAINS.RES = "//res.zhaixiaowai.com/";    
        break;    
    }    
}

可以在github下载完整demo运行测试:https://github.com/zhaixiaowai/webpack-get-custom-arg-and-packagejson-data