webpack多环境打包的相关文件修改配置

基于webpack 3.x 的多环境打包配置

  1. 安装cross-env
	cnpm install  cross-env --save
  1. 修改package.json

build 通过cross-env 设置了不同的变量 env_config ,在node环境下运行build.js

"scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "unit": "jest --config test/unit/jest.conf.js --coverage",
    "test": "npm run unit",
    "build": "node build/build.js",
    "build:test": "cross-env env_config=test node build/build.js",
    "build:pre": "cross-env env_config=pre node build/build.js",
    "build:prod": "cross-env env_config=prod node build/build.js"
  },

3.修改build.js

// 删除这一句
// process.env.NODE_ENV = 'production'

const ora = require('ora')
const rm = require('rimraf')
const path = require('path')
const chalk = require('chalk')
const webpack = require('webpack')
const config = require('../config')
const webpackConfig = require('./webpack.prod.conf')

//这里是修改,读取设置的变量
const spinner = ora('building for ' + process.env.env_config)

spinner.start()

  •  

4.在config文件夹下新建pre.env.js。test.env.js 和 prod.env.js 同理,设置不同的BaseURL

'use strict'
const merge = require('webpack-merge')
const devEnv = require('./dev.env')

module.exports = merge(devEnv, {
  NODE_ENV: '"pre"',
  BASE_URL:'"http://pre.xxx.com/api/"'
})

5.修改webpack.prod.config.js

删除这一段
// const env = process.env.NODE_ENV === 'testing'
//   ? require('../config/test.env')
//   : require('../config/prod.env')
//根据执行的不同的命令去加载不同的文件
const env = process.env.NODE_ENV = require(`../config/${process.env.env_config}.env`)

//中间部分代码省略

new webpack.DefinePlugin({
    'process.env': env
   }),

 

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值