webpack开发模式和生产模式设置及不同环境脚本执行
1. webpack设置开发模式和生产模式
(1). DefinePlugin插件设置
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
},
__DEV__: false
}) new webpack.DefinePlugin({
'process.env': {
NODE_ENV: JSON.stringify('production')
},
__DEV__: false
}) new webpack.DefinePlugin({
'process.env.NODE_ENV': '"production"',
__DEV__: false
})
(2). 命令行设置
"scripts": {
"watch": "cross-env NODE_ENV=production ....."
}
2. 开发模式和生产模式脚本区分执行
if(process.env.NODE_ENV == 'development'){
console.log('development');
}
else{
console.log('production');
} if(__DEV__){
console.log('development');
}
else{
console.log('production');
}
以上代码不必担心在浏览器中会不兼容,webpack会将其编译为一个bool值:
if(true){
console.log('development');
}
else{
console.log('production');
} if(false){
console.log('development');
}
else{
console.log('production');
}
如果使用了UglifyJsPlugin,则会编译为:
console.log('development');
console.log('production');
完全不会增加多余的代码,不会增大线上文件体积,所以可以放心使用。
3. html页面注入环境变量
在htmlWebpackPlugin中添加环境变量env的配置
new HtmlWebpackPlugin({
template: './src/public/index.ejs',
inject: 'body',
hash: true,
env: process.env.NODE_ENV
})
在html页面中可以这样使用
<% if(htmlWebpackPlugin.options.env == 'production'){ %>
<script src="xxx/react.min.js"></script>
<script src="xxx/react-dom.min.js"></script>
<% } else { %>
<script src="xxx/react.development.js"></script>
<script src="xxx/react-dom.development.js"></script>
<% } %>
通常情况下,开发模式hash为false,生成模式hash为true,也可以用hash这个变量来区分环境
<% if(htmlWebpackPlugin.options.hash){ %>
<script src="xxx/react.min.js"></script>
<script src="xxx/react-dom.min.js"></script>
<% } else { %>
<script src="xxx/react.development.js"></script>
<script src="xxx/react-dom.development.js"></script>
<% } %>
webpack开发模式和生产模式设置及不同环境脚本执行的更多相关文章
- 说说对npm的开发模式和生产模式的理解
nodejs这些年的发展非常快,相信没有哪个前端不知道的了,npm也成为了前端开发中经常用到了的一个命令.那么npm不是只用一个 "npm install xxx"命令就够了吗?实 ...
- weblogic开发模式与生产模式介绍
weblogic开发模式与生产模式介绍 开发模式:该模式启用自动部署 生产模式:该模式关闭自动部署 weblogic server 三种部署方法:自动部署.控制台部署.命令部署 自动部署:当其处于启用 ...
- webpack4 系列教程(十六):开发模式和生产模式·实战
好文章 https://www.jianshu.com/p/f2d30d02b719
- weblogic-开发模式与生产模式互换
生产转开发 Step 1: 目标文件:domain/bin/setDomainEnv.sh 修改内容:PRODUCTION_MODE="true"改为PRODUCTION_MODE ...
- WebLoigc的配置(生产模式与开发模式)
1.Weblogic两种模式的切换1).生产模式--->开发模式将domain路径下的bin\setDomainEnv.cmd文件中set PRODUCTION_MODE=true改为set P ...
- weblogic 生产模式和开发模式的互相转换
weblogic 生产模式和开发模式的互相转换 学习了:http://blog.csdn.net/qew110123/article/details/45845935 weblogic10.3生产模式 ...
- 2016/5/6 thinkphp ①框架 ② 框架项目部署 ③MVC模式 ④控制器访问及路由解析 ⑤开发和生产模式 ⑥控制器和对应方法创建 ⑦视图模板文件创建 ⑧url地址大小写设置 ⑨空操作空控制器 ⑩项目分组
真实项目开发步骤: 多人同时开发项目,协作开发项目.分工合理.效率有提高(代码风格不一样.分工不好) 测试阶段 上线运行 对项目进行维护.修改.升级(单个人维护项目,十分困难,代码风格不一样) 项目稳 ...
- 【翻译】Webpack 4 从0配置到生产模式
查看原文 webpack 4 发布了! webpack 4 作为一个零配置的模块打包器 webpack 是强大的并且有许多独一无二的特点但是有一个痛点就是配置文件. 在中型到大型项目中为webpack ...
- 微信小程序:首页设置方法(开发模式,使用模式)与其他相关设置
小程序开发并不愉快,许多必建的文件不会自动生成,页面之间的跳转没有快捷键,开发者工具显示区域受限……如果谁有对应的解决办法求告知…… 开始的时候每次保存代码,页面都会刷洗重新渲染一次,而且自动跳回首页 ...
随机推荐
- 「LeetCode」0003-Add Two Numbers(Typescript)
分析 代码 /** * @param {ListNode} l1 * @param {ListNode} l2 * @return {ListNode} */ var addTwoNumbers=fu ...
- Navicat 导入sql脚本文件
Navicat 导入sql脚本文件 我在组建自己工作用的数据库时要导入.sql脚本文件,用cmd窗口导入太慢,navicat的导入向导里又无导入sql脚本的选项, 但不是navicat中没有导入sql ...
- spring boot 报错 Error creating bean with name
Application 启动类 要和父目录平级
- lintcode166 链表倒数第n个节点
链表倒数第n个节点 找到单链表倒数第n个节点,保证链表中节点的最少数量为n. 思路:设置两个指针first,second指向head,first指针先向前走n,然后两个指针一起走,first指针走到末 ...
- 利用人脸特征提取DeepID--解读世纪晟人脸识别
概述:DeepID的目标是人脸验证(判断两张图片是否是一个人),同时衍生出人脸识别(多次人脸验证). DeepID采用增大数据集的方法: 增加新的数据,celebFaces(87628张图片,5436 ...
- Leetcode - 461. Hamming Distance n&=(n-1) (C++)
1. 题目链接:https://leetcode.com/problems/hamming-distance/description/ 2.思路 常规做法做完看到评论区一个非常有意思的做法.用了n&a ...
- HDU 4169 Wealthy Family(树形DP)
Problem Description While studying the history of royal families, you want to know how wealthy each ...
- Repair the Wall (贪心)
Long time ago , Kitty lived in a small village. The air was fresh and the scenery was very beautiful ...
- 软件测试基础-Homework1
The error was in my graduate work which was about game development.I broadcast some messages to the ...
- iOS开发应用程序更新
#import "ViewController.h" //1一定要先配置自己项目在商店的APPID,配置完最好在真机上运行才能看到完全效果哦 #define STOREAPPID ...