webpack.DefinePlugin与cross-env区别详解


Posted in Javascript onFebruary 23, 2020

webpack.DefinePlugin与cross-env常用于在项目工程化中定义环境变量,webpack.DefinePlugin用于在编译期定义环境变量,意味着在代码中写上process.env.NODE_ENV不会在编译期出现错误提醒;cross-env库用于在运行时定义环境变量
DefinePlugin用来做定义。这就类似于我们项目开发中的config文件一样,在config文件中一般放的是系统代码中的一些服务器地址之类的公共信息,我们将这些信息提取出来单独放在配置文件中,方便于后期的维护和管理。

// dev.env.js
module.exports = {
  NODE_ENV: 'development'
}
// prod.env.js
module.exports = {
  NODE_ENV: 'production'
}
// webpack配置
const env = require('../config/dev.env')
module.exports = {
  entry: {},
  output: {},
  resolve: {
    extensions: ['.js']
  }
  module: {},
  plugins: [
    new webpack.DefinePlugin({
      'process.env': env.NODE_ENV
    })
  ]
}
// package.json
{
  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "build": "node build/build.js",
    "build:development": "cross-env NODE_ENV=dev node build/build.js",
    "build:test": "cross-env NODE_ENV=test node build/build.js",
    "build:pre": "cross-env NODE_ENV=pre node build/build.js",
    "build:prod": "cross-env NODE_ENV=prod node build/build.js"
  }
}

到此这篇关于webpack.DefinePlugin与cross-env区别详解的文章就介绍到这了,更多相关webpack.DefinePlugin与cross-env内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
Javascript YUI 读码日记之 YAHOO.util.Dom - Part.3
Mar 22 Javascript
jquery图片切换实例分析
Apr 15 Javascript
javascript白色简洁计算器
May 04 Javascript
JavaScript中模拟实现jsonp
Jun 19 Javascript
javascript实现保留两位小数的多种方法
Dec 18 Javascript
javascript垃圾收集机制的原理分析
Dec 08 Javascript
详解VueJs异步动态加载块
Mar 09 Javascript
通过js动态创建标签,并设置属性方法
Feb 24 Javascript
关于echarts在节点显示动态数据及添加提示文本所遇到的问题
Apr 20 Javascript
解决Mac下安装nmp的淘宝镜像失败问题
May 16 Javascript
浅谈PDF.js使用心得
Jun 07 Javascript
JavaScript中set与get方法用法示例
Aug 15 Javascript
深入理解webpack process.env.NODE_ENV配置
Feb 23 #Javascript
微信小程序实现限制用户转发功能的实例代码
Feb 22 #Javascript
vue.js实现简单的计算器功能
Feb 22 #Javascript
Vue.js实现立体计算器
Feb 22 #Javascript
vue实现计算器功能
Feb 22 #Javascript
js实现网页版贪吃蛇游戏
Feb 22 #Javascript
微信小程序 bindtap 传参的实例代码
Feb 21 #Javascript
You might like
分享一个PHP数据流应用的简单例子
2012/06/01 PHP
jQuery ajax在GBK编码下表单提交终极解决方案(非二次编码方法)
2010/10/20 Javascript
解决Extjs上传图片无法预览的解决方法
2012/03/22 Javascript
js 距离某一时间点时间是多少实现代码
2013/10/14 Javascript
javascript实现playfair和hill密码算法
2014/12/07 Javascript
JS实现可自定义大小,可双击关闭的弹出层效果
2015/10/16 Javascript
js控制TR的显示隐藏
2016/03/04 Javascript
利用Vue.js框架实现火车票查询系统(附源码)
2017/02/27 Javascript
js原生日历的实例(推荐)
2017/10/31 Javascript
详解vue-cli项目中用json-sever搭建mock服务器
2017/11/02 Javascript
JavaScript选择排序算法原理与实现方法示例
2018/08/06 Javascript
解决betterScroll在vue中存在图片时,出现拉不动的问题
2018/09/27 Javascript
js实现图片3D轮播效果
2019/09/21 Javascript
jQuery模仿ToDoList实现简单的待办事项列表
2019/12/30 jQuery
JavaScript实现猜数字游戏
2020/05/20 Javascript
vue实现折线图 可按时间查询
2020/08/21 Javascript
[02:08]什么藏在DOTA2 TI9“小紫本”里?斧王历险记告诉你!
2019/05/17 DOTA
Python中的测试模块unittest和doctest的使用教程
2015/04/14 Python
解密Python中的描述符(descriptor)
2015/06/03 Python
Python中http请求方法库汇总
2016/01/06 Python
python用户管理系统
2018/03/13 Python
Django如何配置mysql数据库
2018/05/04 Python
pandas DataFrame 警告(SettingWithCopyWarning)的解决
2019/07/23 Python
python爬取Ajax动态加载网页过程解析
2019/09/05 Python
python实现多进程按序号批量修改文件名的方法示例
2019/12/30 Python
Python实现快速大文件比较代码解析
2020/09/04 Python
python绘图模块之利用turtle画图
2021/02/12 Python
CSS3实现多背景展示效果通过CSS3定位多张背景
2014/08/10 HTML / CSS
Myprotein葡萄牙官方网站:英国优质运动营养品牌
2016/09/12 全球购物
JD Sports德国官网:英国领先的运动鞋和运动服饰零售商
2018/02/26 全球购物
俞敏洪北大演讲稿
2014/05/22 职场文书
会计专业求职信
2014/08/10 职场文书
十佳少年事迹材料
2014/12/25 职场文书
2015年国庆晚会主持词
2015/07/01 职场文书
各国货币符号大全
2022/02/17 杂记
Win10此设备不支持接收Miracast无法投影的解决方法
2022/07/07 数码科技