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 ...
- 微信小程序:首页设置方法(开发模式,使用模式)与其他相关设置
小程序开发并不愉快,许多必建的文件不会自动生成,页面之间的跳转没有快捷键,开发者工具显示区域受限……如果谁有对应的解决办法求告知…… 开始的时候每次保存代码,页面都会刷洗重新渲染一次,而且自动跳回首页 ...
随机推荐
- 「日常训练」 Genghis Khan the Conqueror(HDU-4126)
题意 给定\(n\)个点和\(m\)条无向边(\(n\le 3000\)),需要将这\(n\)个点连通.但是有\(Q\)次(\(Q\le 10^4\))等概率的破坏,每次破坏会把\(m\)条边中的某条 ...
- hdu1527取石子游戏(威佐夫博弈)
取石子游戏 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Submi ...
- spark-submit配置说明
<Spark 官方文档>Spark配置 spark-1.6.0 原文地址 Spark配置 Spark有以下三种方式修改配置: Spark properties (Spark属性)可以控制绝 ...
- ubuntu16.04图形界面安装中文输入法,中文展示
打开system Settings 设置 打开设置语言 安装Language Support 点击installed languages 选择chinese 打勾,安装 安装IBus框 ...
- def语句和参数
如果调用print()或len()函数,你会传入一些值,放在括号内,在这里成为“参数”.也可以自己定义接受参数的函数.在文件编辑器中输入这个例子: def hello(name): print('He ...
- 火狐metamask账号
火狐metamask lock trophy pyramid sunny aim inmate body sense sing castle cinnamon cram
- vuejs学习之 项目打包之后的首屏加载优化
vuejs学习之 项目打包之后的首屏加载优化 一:使用CDN资源 我们在打包时,会将package.json里,dependencies对象里插件打包起来,我们可以将其中的一些使用cdn的方式加载,例 ...
- redis集群sentinel哨兵模式的搭建与实际应用
参考资料:https://blog.csdn.net/men_wen/article/details/72724406 之前环境使用的keepalived+redis vip集群模式,现在我们服务切换 ...
- psp1111
1 本周psp 2.本周进度条 3.本周累积进度图 代码累积折线图 博文字数累积折线图 4.本周PSP饼状图
- Java中I/O流之处理流类型
节点流:一个管道直接连接到数据源上面: 处理流:套在别的管道上面的管道: 处理流类型: [注]:在字符流中的OuPutStreamReader写错了,应该是:OutputStreamWriter