webpack定义环境变量

H_x

于 2020-05-25 15:57:27 发布

阅读量2k

点赞数

分类专栏： webpack 文章标签： webpack

本文链接：https://blog.youkuaiyun.com/qq_43650979/article/details/106334214

版权

webpack 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了两种在webpack中定义环境变量的方法。方法1是直接在webpack配置文件中使用DefinePlugin插件；方法2是在不同环境如开发环境和生产环境中创建对应的webpack配置文件，通过设置不同变量实现环境区分。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

方法1：直接配置

（1）在webpack配置文件中使用webpack自带的DefinePlugin插件
在这里插入图片描述
（2）在其他文件中使用变量

（3）效果：

2.方法2：在不同的环境中定义不同的变量

(1)npm install webpack-merge
(2)项目目录下新建webpack.base.js, webpack.prod.js, webpack.dev.js文件
其中webpack.prod.js用于生产环境，webpack.dev.js用于开发环境，webpack.base.js同时用于开发环境和生产环境

// webpack.prod.js
let {smart} = require('webpack-merge')
let base = require('./webpack.base.js')

module.exports = smart(base, {
    mode: 'production'
})

// webpack.dev.js
let {smart} = require('webpack-merge')
let base = require('./webpack.base.js')

module.exports = smart(base, {
    mode: 'development'
})

(3)分别在开发环境和生产环境中打包:npm run build -- --config webpack.dev.js
npm run build -- --config webpack.prod.js
也可以在package.json中修改命令：
在这里插入图片描述
(4)然后可以在不同的环境下根据方法1定制不同的变量