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 相关文章推荐
彻底搞懂JS无缝滚动代码
Jan 03 Javascript
JS Array对象入门分析
Oct 30 Javascript
JavaScript入门基础
Aug 12 Javascript
JS基于VML技术实现的五角星礼花效果代码
Oct 26 Javascript
JQuery点击事件回到页面顶部效果的实现代码
May 24 Javascript
JS实现的手机端精简幻灯片效果
Sep 05 Javascript
AngularJS 过滤与排序详解及实例代码
Sep 14 Javascript
socket.io实现在线群聊功能
Apr 07 Javascript
Js利用prototype自定义数组方法示例
Oct 20 Javascript
jquery实现回车键触发事件(实例讲解)
Nov 21 jQuery
深入浅析nuxt.js基于ssh的vue通用框架
May 21 Javascript
echarts柱状图背景重叠组合而非并列的实现代码
Dec 10 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 curl 获取https请求的2种方法
2015/04/27 PHP
PHP查询附近的人及其距离的实现方法
2016/05/11 PHP
利用PHP判断文件是否为图片的方法总结
2017/01/06 PHP
PHP常见加密函数用法示例【crypt与md5】
2019/01/27 PHP
PHP PDOStatement::errorCode讲解
2019/01/31 PHP
slice函数的用法 之不错的应用
2006/12/29 Javascript
js选择并转移导航菜单示例代码
2014/08/19 Javascript
jQuery+AJAX实现网页无刷新上传
2015/02/22 Javascript
jQuery 1.9.1源码分析系列(十五)之动画处理
2015/12/03 Javascript
基于JavaScript实现通用tab选项卡(通用性强)
2016/01/07 Javascript
bootstrap fileinput组件整合Springmvc上传图片到本地磁盘
2017/05/11 Javascript
webpack配置打包后图片路径出错的解决
2018/04/26 Javascript
详解Vue微信授权登录前后端分离较为优雅的解决方案
2018/06/29 Javascript
eslint 的三大通用规则详解
2019/05/16 Javascript
Vue多环境代理配置方法思路详解
2019/06/21 Javascript
vuex存储token示例
2019/11/11 Javascript
jQuery实现鼠标移入显示蒙版效果
2020/01/11 jQuery
[01:14]DOTA2亚洲邀请赛 ShowOpen
2015/02/07 DOTA
python发送邮件实例分享
2017/07/28 Python
python使用requests.session模拟登录
2019/08/09 Python
Python爬虫运用正则表达式的方法和优缺点
2019/08/25 Python
python中的函数递归和迭代原理解析
2019/11/14 Python
python识别验证码图片实例详解
2020/02/17 Python
基于python实现获取网页图片过程解析
2020/05/11 Python
Python ADF 单位根检验 如何查看结果的实现
2020/06/03 Python
全球领先的全景影像品牌:Insta360
2019/08/21 全球购物
KIKO MILANO俄罗斯官网:意大利领先的化妆品和护肤品品牌
2021/01/09 全球购物
新郎婚宴答谢词
2014/01/19 职场文书
应届优秀本科大学毕业生自我鉴定
2014/01/21 职场文书
协议书范本
2014/04/23 职场文书
活动总结书
2014/05/08 职场文书
禁烟标语大全
2014/06/11 职场文书
公司采购主管岗位职责
2014/06/17 职场文书
幼师个人总结范文
2015/02/28 职场文书
详解Vue的options
2021/05/15 Vue.js
Spring-cloud Config Server的3种配置方式
2021/09/25 Java/Android