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 相关文章推荐
基于jQuery的获取标签名的代码
Jul 16 Javascript
javascript的数组和常用函数详解
May 09 Javascript
JS动态增加删除UL节点LI及相关内容示例
May 21 Javascript
jquery使用经验小结
May 20 Javascript
javascript制作照片墙及制作过程中出现的问题
Apr 04 Javascript
JavaScript获取服务器端时间的方法
Nov 29 Javascript
js实时监控文本框输入字数的实例代码
Jan 18 Javascript
Node.js上传文件功能之服务端如何获取文件上传进度
Feb 05 Javascript
vue升级之路之vue-router的使用教程
Aug 14 Javascript
vue实现自定义日期组件功能的实例代码
Nov 06 Javascript
Vue实现商品飞入购物车效果(电商项目)
Nov 26 Javascript
Vue 样式切换及三元判断样式关联操作
Aug 09 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图片加水印原理(超简单的实例代码)
2013/01/18 PHP
以文件形式缓存php变量的方法
2015/06/26 PHP
thinkphp实现附件上传功能
2017/05/26 PHP
JavaScript中的new的使用方法与注意事项
2007/05/16 Javascript
基于JQuery 的消息提示框效果代码
2011/07/31 Javascript
关于query Javascript CSS Selector engine
2013/04/12 Javascript
javascript轻松实现当鼠标移开时已弹出子菜单自动消失
2013/12/29 Javascript
ajax提交表单实现网页无刷新注册示例
2014/05/08 Javascript
javascript与jquery动态创建html元素示例
2016/07/25 Javascript
使用Angular.js开发的注意事项
2016/10/19 Javascript
bootstrap表格分页实例讲解
2016/12/30 Javascript
原生JS实现几个常用DOM操作API实例
2017/01/19 Javascript
vue项目中运用webpack动态配置打包多种环境域名的方法
2019/06/24 Javascript
layui 选择列表,打勾,点击确定返回数据的例子
2019/09/02 Javascript
高性能js数组去重(12种方法,史上最全)
2019/12/21 Javascript
Jquery属性的获取/设置及样式添加/删除操作技巧分析
2019/12/23 jQuery
javascript实现点击产生随机图形
2021/01/25 Javascript
[52:20]DOTA2-DPC中国联赛正赛 SAG vs XGBO3 第一场 3月5日
2021/03/11 DOTA
分析Python的Django框架的运行方式及处理流程
2015/04/08 Python
利用Python爬取微博数据生成词云图片实例代码
2017/08/31 Python
详解Django rest_framework实现RESTful API
2018/05/24 Python
flask框架中勾子函数的使用详解
2018/08/01 Python
奥地利顶级内衣丝袜品牌英国站:Wolford英国
2016/08/29 全球购物
Expedia印度尼西亚站:预订酒店、廉价航班和度假套餐
2018/01/31 全球购物
应届医学毕业生求职信分享
2013/12/02 职场文书
企业演讲稿范文大全
2014/05/20 职场文书
学校学雷锋活动总结
2014/06/26 职场文书
班主任与学生安全责任书
2014/07/25 职场文书
学校开学标语
2014/10/06 职场文书
社区四风存在问题及整改措施
2014/10/26 职场文书
写给父母的感谢信
2015/01/22 职场文书
MySQL的安装与配置详细教程
2021/06/26 MySQL
Python制作一个随机抽奖小工具的实现
2021/07/07 Python
PostgreSQL常用字符串分割函数整理汇总
2022/07/07 PostgreSQL
Win11使用CAD卡顿或者致命错误怎么办?Win11无法正常使用CAD的解决方法
2022/07/23 数码科技
修改Nginx配置返回指定content-type的方法
2022/09/23 Servers