webpack配置多环境打包

最新推荐文章于 2025-11-14 03:05:05 发布

原创最新推荐文章于 2025-11-14 03:05:05 发布 · 317 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#webpack #vue.js

收录于

vue 专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何利用webpack的DefinePlugin插件，在不同环境下配置全局变量。通过在webpack.config.js中定义插件，并借助cross-env包，可在package.json中设置scripts来切换开发、测试和生产环境，实现代码构建和环境变量的灵活管理。

使用DefinePlugin这个插件去定义全局变量

在webpack.config.js中这样配置：

module.exports = {
	plugins: [
		new webpack.DefinePlugin({
	      'process.env.API_ENV':JSON.stringify(process.env.API_ENV|| 'prod'),
	      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'production')
	    })
	]
}

在下载这个包 “cross-env”: "^5.2.0"这个版本
在package.json文件中去配置scripts

"scripts": { 	"test": "echo \"Error: no test specified\" && exit 1",
    "dev": "cross-env NODE_ENV=development API_ENV=test node_modules/.bin/webpack-dev-server",
    "build": "cross-env NODE_ENV=production API_ENV=test webpack",
    "build:test": "cross-env NODE_ENV=production API_ENV=test webpack",
    "build:pre": "cross-env NODE_ENV=production API_ENV=pre webpack",
    "build:prod": "cross-env NODE_ENV=production API_ENV=prod webpack", 	"dev:test": "cross-env NODE_ENV=development API_ENV=test node_modules/.bin/webpack-dev-server",   	"dev:pre": "cross-env NODE_ENV=development API_ENV=pre node_modules/.bin/webpack-dev-server", 	"dev:prod": "cross-env NODE_ENV=development API_ENV=prod node_modules/.bin/webpack-dev-server" }