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的面向对象(一)
Nov 09 Javascript
一实用的实现table排序的Javascript类库
Sep 12 Javascript
web 页面分页打印的实现
Jun 22 Javascript
自动刷新网页,自动刷新当前页面,JS调用
Jun 24 Javascript
jquery插件tooltipv顶部淡入淡出效果使用示例
Dec 05 Javascript
javascript删除数组元素并且数组长度减小的简单实例
Feb 14 Javascript
基于jQuery的JavaScript模版引擎JsRender使用指南
Dec 29 Javascript
jQuery插件制作之参数用法实例分析
Jun 01 Javascript
学习Bootstrap组件之下拉菜单
Jul 28 Javascript
vue+iview+less+echarts实战项目总结
Feb 22 Javascript
Node.js log4js日志管理详解
Jul 31 Javascript
Vue $emit()不能触发父组件方法的原因及解决
Jul 28 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
在windows iis5下安装php4.0+mysql之我见
2006/10/09 PHP
深入php 正则表达式的学习探讨
2013/06/06 PHP
php创建基本身份认证站点的方法详解
2013/06/08 PHP
关于PHP5.6+版本“No input file specified”问题的解决
2019/12/11 PHP
input 高级限制级用法
2009/03/26 Javascript
javascript中的prototype属性使用说明(函数功能扩展)
2010/08/16 Javascript
JS画5角星方法介绍
2013/09/17 Javascript
jQuery添加/改变/移除CSS类及判断是否已经存在CSS
2014/08/20 Javascript
jQuery EasyUI编辑DataGrid用combobox实现多级联动
2016/08/29 Javascript
js实现自定义进度条效果
2017/03/15 Javascript
使用Vue开发动态刷新Echarts组件的教程详解
2018/03/22 Javascript
vue大型项目之分模块运行/打包的实现
2020/09/21 Javascript
解决Vue watch里调用方法的坑
2020/11/07 Javascript
[02:36]DOTA2上海特锦赛 回忆电竞生涯的重要瞬间
2016/03/25 DOTA
Django中对数据查询结果进行排序的方法
2015/07/17 Python
python+matplotlib实现礼盒柱状图实例代码
2018/01/16 Python
使用requests库制作Python爬虫
2018/03/25 Python
python sort、sort_index方法代码实例
2019/03/28 Python
PyCharm 配置远程python解释器和在本地修改服务器代码
2019/07/23 Python
python pyinstaller打包exe报错的解决方法
2019/11/02 Python
解决django migrate报错ORA-02000: missing ALWAYS keyword
2020/07/02 Python
Python求区间正整数内所有素数之和的方法实例
2020/10/13 Python
Django使用django-simple-captcha做验证码的实现示例
2021/01/07 Python
HTML如何让IMG自动适应DIV容器大小的实现方法
2020/02/25 HTML / CSS
国外平面设计第一市场:99designs
2016/10/25 全球购物
花园仓库建筑:Garden Buildings Direct
2018/02/16 全球购物
请解释流与文件有什么不同
2016/07/29 面试题
通信工程专业个人找工作求职信范文
2013/09/21 职场文书
物流仓储实习自我鉴定
2013/09/25 职场文书
计算机应届毕业生自荐信范文
2014/02/23 职场文书
可口可乐广告词
2014/03/20 职场文书
迟到检讨书2000字(精选篇)
2014/10/07 职场文书
机关干部四风问题自我剖析及整改措施
2014/10/26 职场文书
python基于OpenCV模板匹配识别图片中的数字
2021/03/31 Python
python可视化之颜色映射详解
2021/09/15 Python
基于angular实现树形二级表格
2021/10/16 Javascript