前端开发工作中可能会遇到这样的需求:本地开发、测试环境、客户的线上环境等对应的服务器地址不一样,例如本地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': {