webpack多环境打包配置

最新推荐文章于 2026-04-06 12:17:21 发布

原创

最新推荐文章于 2026-04-06 12:17:21 发布 · 3.7k 阅读

标签

#webapck #前端

收录于

本文介绍了如何基于webpack 2.x 配置多环境打包，以适应不同环境如测试、预发和正式环境下的请求URL。通过安装cross-env进行跨平台环境变量设置，修改package.json和build.js，以及创建不同环境的.env.js配置文件，确保每次打包时能自动适应不同环境的基础URL。最后在webpack.prod.config.js中应用这些配置，并用axios测试HTTP请求的baseURL是否正确。

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

在我们实际的项目开发中，可能有多个部署环境，测试环境，预发环境，正式环境。每个环境的请求URL都不同，每次打包时手动更换很麻烦，此时就需要配置多环境打包。

安装cross-env

Run scripts that set and use environment variables across platforms
跨平台设置和使用环境变量的运行脚本

	npm install  cross-env --save
	Or
	yarn add cross-env --save

修改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: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