CD's blog CD's blog
首页
  • HTMLCSS
  • JavaScript
  • Vue
  • TypeScript
  • React
  • Node
  • Webpack
  • Git
  • Nestjs
  • 小程序
  • 浏览器网络
  • 学习笔记

    • 《TypeScript 从零实现 axios》
    • Webpack笔记
  • JS/TS教程

    • 《现代JavaScript》教程
🔧工具方法
  • 网站
  • 资源
  • Vue资源
  • 分类
  • 标签
  • 归档
GitHub (opens new window)

CD_wOw

内卷的行情,到不了的梦
首页
  • HTMLCSS
  • JavaScript
  • Vue
  • TypeScript
  • React
  • Node
  • Webpack
  • Git
  • Nestjs
  • 小程序
  • 浏览器网络
  • 学习笔记

    • 《TypeScript 从零实现 axios》
    • Webpack笔记
  • JS/TS教程

    • 《现代JavaScript》教程
🔧工具方法
  • 网站
  • 资源
  • Vue资源
  • 分类
  • 标签
  • 归档
GitHub (opens new window)
  • 配置

  • 指南(实例)

    • 安装
    • 起步
    • 管理资源
    • 管理输出
    • 开发
    • 模块热替换
    • tree shaking
    • 生产环境构建
    • 代码分离
    • 懒加载
    • 缓存
    • 创建 library
    • shimming
    • 渐进式网络应用程序
    • TypeScript
    • 迁移到新版本
    • 使用环境变量
    • 构建性能
    • 内容安全策略
    • 开发 - Vagrant
    • 管理依赖
    • 公共路径(public path)
    • 集成(integrations)
  • 《Webpack》笔记
  • 指南(实例)
CD_wOw
2020-12-15

使用环境变量

要在开发 (opens new window)和生产构建 (opens new window)之间,消除 webpack.config.js 的差异,你可能需要环境变量。

webpack 命令行环境配置 (opens new window)中,通过设置 --env 可以使你根据需要,传入尽可能多的环境变量。在 webpack.config.js 文件中可以访问到这些环境变量。例如,--env.production 或 --env.NODE_ENV=local(NODE_ENV 通常约定用于定义环境类型,查看这里 (opens new window))。

webpack --env.NODE_ENV=local --env.production --progress
1

如果设置 env 变量,却没有赋值,--env.production 默认将 --env.production 设置为 true。还有其他可以使用的语法。有关详细信息,请查看 webpack CLI (opens new window) 文档。

然而,你必须对 webpack 配置进行一处修改。通常,module.exports 指向配置对象。要使用 env 变量,你必须将 module.exports 转换成一个函数:

webpack.config.js

module.exports = env => {
  // Use env.<YOUR VARIABLE> here:
  console.log('NODE_ENV: ', env.NODE_ENV) // 'local'
  console.log('Production: ', env.production) // true

  return {
    entry: './src/index.js',
    output: {
      filename: 'bundle.js',
      path: path.resolve(__dirname, 'dist')
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
编辑 (opens new window)
#Webpack
上次更新: 2021/08/22, 01:09:59
迁移到新版本
构建性能

← 迁移到新版本 构建性能→

最近更新
01
gsap动画库学习笔记 - 持续~
06-05
02
远程组件加载方案笔记
05-03
03
小程序使用笔记
03-29
更多文章>
Theme by Vdoing | Copyright © 2020-2023 CD | MIT License
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式