webpack 配置不同环境下不同的域名

1.作用： 定义全局变量

参考文档：blog.csdn.net/qq_34035425…

2.webpack中mode、NODE_ENV、DefinePlugin、cross-env的使用

• mode的基本使用：可选值为developmen，production，none；默认是production

mode: 'production',
// 或者
webpack --mode=development

缺点： 在模块中可以拿到process.env.NODE_ENV,但是在webpack.config.js中无法使用

• 为了保证在配置文件和模块中都能拿到环境变量，使用NODE_ENV

NODE_ENV=development webpack

但是大多数windows中命令行会报错。同样windows与linux命令如何使用环境变量也不同，需要使用cross-env支持跨平台设置

• cross-env

cross-env NODE_ENV=development webpack

用途： 根据不同的环境配置不同的域名 比如在config.env.js中

const env = process.env.NODE_ENV; 
const config = {
    development: { 
        loginApi: 'www.abc-login-test.com', 
        orderApi: 'www.abc-order-test.com'
    }, 
    production: { 
        loginApi: 'www.abc-login.com', 
        orderApi: 'www.abc-order.com' 
    } 
}; 
module.exports = config[env];

-DefinePlugin

然后在webpack.config.js中

const envConfig= require('.config.env.js');
module.exports = { 
    ... 
    plugins: [ 
        new webpack.DefinePlugin({ 
            envConfig: JSON.stringify(envConfig)
            })
        ] 
    ...
}

模块中就可以使用 envConfig

• 总结

相关文件以及代码： package.json

"scripts": {
    "build": "cross-env NODE_ENV=production webpack",
},

config.env.js

const env = process.env.NODE_ENV;
const config = {
  development: {
    loginApi: 'www.abc-login-test.com',
    orderApi: 'www.abc-order-test.com'
  },
  production: {
    loginApi: 'www.abc-login.com',
    orderApi: 'www.abc-order.com'
  }
};
module.exports = config[env]

webpack.config.js

const path = require('path')

const webpack = require('webpack')
const envConfig = require('./config.env')
const envPlugin = new webpack.DefinePlugin({
    envConfig: JSON.stringify(envConfig)
})

module.exports = {
    mode:  process.env.NODE_ENV,
    entry: path.join(__dirname, 'src', 'index.js'),
    output: {
        path: path.join(__dirname, 'dist'),
        filename: 'bundle.js',
    },
    plugins: [ envPlugin],
}

index.js

console.log('current env:',process.env.NODE_ENV);
console.log('envConfig:', envConfig)