webpack开发或打包多环境配置

项目开发流程一般流程可能有开发和生产,但是也会有测试和预发,这样四个环境下。npn run dev 或者
npm run build 时就需要对应不同环境。
在这里插入图片描述
如此增加一个环境参数env_config 分别在dev.env.js 和prod.env.js

var merge = require('webpack-merge');
var prodEnv = require('./prod.env');

module.exports = merge(prodEnv, {
	NODE_ENV: '"development"',
	env_config: '"' +process.env.env_config+ '"'
});
module.exports = {
	NODE_ENV: '"production"',
	env_config: '"' +process.env.env_config+ '"'
};

对应npm 命令

    "dev:dev": "cross-env env_config=dev node build/dev-server.js",
    "dev:pro": "cross-env env_config=pro node build/dev-server.js",
    "dev:pre": "cross-env env_config=pre node build/dev-server.js",
    "dev:test": "cross-env env_config=test node build/dev-server.js",
    "build:dev": "cross-env env_config=dev node build/build.js",
    "build:pro": "cross-env env_config=pro node build/build.js",
    "build:pre": "cross-env env_config=pre node build/build.js",
    "build:test": "cross-env env_config=test node build/build.js"

当然 npm -i cross-env --dev-save

就可以实现诸如不同环境的域名
domainconfig.js

module.exports = {
    domain: function() {
        let environment = process.env.env_config;
        if (environment == 'test') {
            return 'https://www.test.com'
        } else if (environment == 'pre') {
            return 'https://www.pre.com'
        } else if (environment == 'pro') {
            return 'https://www.pro.com'
        } else if (environment== 'dev') {
            return 'https://www.dev.com'
        }
    }
}

代理配置等

var path = require('path');
var domain = require('../domainconfig/index');

module.exports = {
	
	dev: {
		env: require('./dev.env'),
		port: 3333,
		https:true,
		autoOpenBrowser: true,
		assetsSubDirectory: 'static',
		assetsPublicPath: '/',
		host: '127.0.0.1',
		proxyTable: {
			'/api': {
			  target: domain.domain(),
			  changeOrigin: true,  //是否跨域
			  pathRewrite: {
				'^/api': '/api',
			  }
			},
		},
	
		cssSourceMap: true
	},
	externalsCss_dev:[
	
	],
	externalsCss_prod: [
	
	],
	externalsJs_dev:[
	
	],
	externalsJs_prod: [
	
	],
	title: '' //模板标题
};

如此执行 npm run dev:pre
在这里插入图片描述

原创文章 60 获赞 17 访问量 21万+

猜你喜欢

转载自blog.csdn.net/ling369523246/article/details/103245954