myJS
  • 说明
  • js核心
  • 函数式编程
    • 链式优化
    • 你真的知道函数吗?
    • 纯函数
    • 函数柯里化
  • 内存的那些事
    • 栈内存和堆内存
    • 垃圾回收机制-GC
    • 闭包恍然大悟
      • 运行时的词法作用域
    • 数据结构基于内存
    • 怎样用chrome devtool 查看内存泄漏状况
    • dom元素的内存泄漏例子讲解
  • 网络请求
    • 原生js请求
    • https了解一下
    • 跨域方法
    • 你不知道的浏览器页面渲染机制
    • 聊点 TCP 干货(1)
  • 异步编程
    • await 和 async
  • 服务器
    • nginx
  • 模块化编程
    • commonJs模块
    • ES模块
    • AMD模块
    • CMD模块
    • module.exports与export那些事儿
  • webpack
    • 环境变量的使用
      • node配置
      • webapck配置
    • postcss处理css
    • webpack-dev-server
    • HMR热更新原理
    • babel配置
      • 转化es6
      • Runtime transform/runtime
    • extract-text-webpack-plugin
    • css加载
    • 打包优化
    • 第三方插件加载中
    • 热更新踩坑
    • typescript+node
    • 代码分割的意思
  • CMD命令行
    • 文件的增删改查
  • node
    • path模块
    • node 文件路径的分析
  • js一些资源库
  • node毛皮
    • cnpm 淘宝镜像
  • 浏览器调试
    • js调试
    • 浏览器同源政策及其规避方法
  • 好好理解变量
    • this指向
    • 作用域
  • 专有名词理解
    • MVC
  • postman
    • 环境变量
  • 树的遍历和操作
    • 二叉树
  • 关于Date你要知道的是?
    • 获取某个月的天数
    • js 日期详解
  • Dom 对象
  • 回调函数
    • 语法。为什么要用
  • class 怎样用好类
    • 用类直接创建对象关联到变量
  • js引擎
  • git操作
    • .gitignore忽略文件
    • 删除操作
  • table学习
    • 表格样式
    • 固定列和行
  • 拖拽
    • 目标容器
    • 狐火的拖拽就是不一样
  • 正则学习
  • 算法
    • 数据结构
  • js小技巧
  • indexDB
  • Matrix 矩阵
Powered by GitBook
On this page

Was this helpful?

  1. webpack
  2. 环境变量的使用

node配置

在打包的时候,开发环境压缩代码时会和webpack-dev-server开启的服务冲突,发生编译错误。本地的开发环境也没必要压缩代码。现在我没有把开发环境和生产环境的配置文件分离出来,使用的都是一个js配置文件。我配置的比较简单,两个环境就是压不压缩代码的区别。不过每次在两个环境中开启关闭压缩代码,都是手动改,太浪费webpack这个神奇的打包工具了。

  • 设置node 的环境来区分:在执行node的脚本的命令里设置变量NODE_ENV的值,然后用 && 连接下一个命令。具体写法如下:

//package.json

{
  "name": "webpack4.x",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build":"set NODE_ENV=production && webpack ",//注意:这是关键
    "start":"webpack --env=production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.6.0",
    "webpack-cli": "^2.0.15"
  }
}
// 用&& 连接webpacj 命令。在window里设置NODE_ENV 要用set命令

因为不同的平台对node的环境变量NODE_ENV的设置不一样,例如 && 以前使用分号; ,但是window系统不行,就变成windows 和*unix 都兼容的写法 && 。不过有的window版本任然不可以。后来就出来了一个小的npm包:cross-env 可以跨平台设置node 的环境变量。

cnpm install -D cross-env ;

以上面的代码package.json为例,然后这样设置build,就是在NODE_ENV=production 前面加上 cross-env ,而且不需要使用 &&

"build":"cross-env NODE_ENV=production  webpack "
Previous环境变量的使用Nextwebapck配置

Last updated 6 years ago

Was this helpful?