webpack配置环境变量
时间: 2024-06-14 15:01:36 浏览: 9
在Webpack中,我们可以使用环境变量来控制打包的行为。可以通过webpack的内置插件DefinePlugin来定义环境变量,使用方式如下:
1. 在webpack.config.js中引入webpack
```
const webpack = require('webpack');
```
2. 在plugins中配置DefinePlugin插件
```
plugins: [
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('production')
}
})
]
```
其中,process.env.NODE_ENV是一个常用的环境变量,用来区分开发环境和生产环境。
3. 在代码中使用环境变量
```
if(process.env.NODE_ENV === 'production'){
// 生产环境下的代码
} else {
// 开发环境下的代码
}
```
相关问题
vue webpack 配置环境变量
在 Vue 中,可以通过 webpack 的 DefinePlugin 插件来配置环境变量。具体步骤如下:
1. 在 webpack 配置文件中引入 webpack 插件:
```
const webpack = require('webpack')
```
2. 在 plugins 中添加 DefinePlugin 插件,并定义环境变量:
```
plugins: [
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify(process.env.NODE_ENV),
API_BASE_URL: JSON.stringify(process.env.API_BASE_URL)
}
})
]
```
其中,NODE_ENV 是一个默认的环境变量,用于指定当前环境是开发环境还是生产环境。API_BASE_URL 是自定义的环境变量,用于指定 API 的基础 URL。
3. 在代码中使用环境变量:
```
console.log(process.env.NODE_ENV)
console.log(process.env.API_BASE_URL)
```
webpack系统环境变量怎么配置
在webpack中配置系统环境变量可以使用`DefinePlugin`插件,该插件可以将配置的变量注入到代码中。以下是配置步骤:
1. 在webpack配置文件中引入`webpack`和`webpack.DefinePlugin`插件
```
const webpack = require('webpack');
```
2. 在webpack配置文件中添加`DefinePlugin`插件
```
module.exports = {
plugins: [
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
'process.env.API_URL': JSON.stringify('http://api.example.com'),
})
]
}
```
3. 在代码中使用环境变量
```
console.log(process.env.NODE_ENV);
console.log(process.env.API_URL);
```
注意:`JSON.stringify`是必须的,因为`DefinePlugin`插件会将变量注入到代码中,如果不加上`JSON.stringify`,则变量会被当成变量名而不是字符串。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)