webpack 配置 process.env 获取命令行参数

最新推荐文章于 2023-07-26 14:59:18 发布

原创最新推荐文章于 2023-07-26 14:59:18 发布 · 置顶 · 7.8k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#webpack #web 开发

web-前端专栏收录该内容

5 篇文章

订阅专栏

本文介绍如何利用webpack从命令行获取参数，实现在前端开发中根据不同环境设置不同服务器地址的需求。通过设置自定义参数http_env，修改webpack配置文件、package.json的scripts及服务器地址配置文件，实现灵活的环境切换。

前端开发工作中可能会遇到这样的需求：本地开发、测试环境、客户的线上环境等对应的服务器地址不一样，例如本地localhost开发、打包到测试环境要换成192开头的地址、打包到线上环境要带https的地址，这个时候如果直接去改配置服务器地址的文件，那就需要改一个打包一次，很麻烦，最好是能通过 npm run xxx 的形式实现。

实现方式分为4个步骤：

确定 webpack 从命令行获取的参数名称 ，这里我定为 http_env。刚开始我是定为NODE_ENV，但是新版本的 webpack 打包的时候会根据 mode 选项来设置NODE_ENV，所以最好是定一个跟 NODE_ENV 不一样的参数名称。

修改 webpack 配置文件中的 plugins 选项 ，代码：

plugins: [
 new webpack.DefinePlugin({
    'process.env': {
        'http_env': JSON.stringify(process.env.http_env)
    }
 })
]

修改 package.json 配置文件中的 scripts 选项，代码：

"build": "cross-env http_env=production webpack --config ./build/webpack.prod.config.js",
"start": "cross-env http_env=development webpack-dev-server --config ./build/webpack.dev.config.js",
"hk": "cross-env http_env=hk webpack --config ./build/webpack.prod.config.js"

修改配置服务器地址的文件, 代码：

const ENV = process.env.http_env

var apiAddr = 'http://192.168.1.201:8080/'
var wsAddr = 'ws://192.168.1.201:8080/'

if(ENV === 'production') {
 apiAddr = 'http://192.168.1.201/'
 wsAddr = 'ws://192.168.1.201/'
} else if(ENV === 'hk') {
   apiAddr = 'https://test.hk'
 wsAddr = 'wss://test.hk'
}

export {
 apiAddr,
 wsAddr
}