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开发模式和生产模式设置及不同环境脚本执行的更多相关文章

  1. 说说对npm的开发模式和生产模式的理解

    nodejs这些年的发展非常快,相信没有哪个前端不知道的了,npm也成为了前端开发中经常用到了的一个命令.那么npm不是只用一个 "npm install xxx"命令就够了吗?实 ...

  2. weblogic开发模式与生产模式介绍

    weblogic开发模式与生产模式介绍 开发模式:该模式启用自动部署 生产模式:该模式关闭自动部署 weblogic server 三种部署方法:自动部署.控制台部署.命令部署 自动部署:当其处于启用 ...

  3. webpack4 系列教程(十六):开发模式和生产模式·实战

    好文章 https://www.jianshu.com/p/f2d30d02b719

  4. weblogic-开发模式与生产模式互换

    生产转开发 Step 1: 目标文件:domain/bin/setDomainEnv.sh 修改内容:PRODUCTION_MODE="true"改为PRODUCTION_MODE ...

  5. WebLoigc的配置(生产模式与开发模式)

    1.Weblogic两种模式的切换1).生产模式--->开发模式将domain路径下的bin\setDomainEnv.cmd文件中set PRODUCTION_MODE=true改为set P ...

  6. weblogic 生产模式和开发模式的互相转换

    weblogic 生产模式和开发模式的互相转换 学习了:http://blog.csdn.net/qew110123/article/details/45845935 weblogic10.3生产模式 ...

  7. 2016/5/6 thinkphp ①框架 ② 框架项目部署 ③MVC模式 ④控制器访问及路由解析 ⑤开发和生产模式 ⑥控制器和对应方法创建 ⑦视图模板文件创建 ⑧url地址大小写设置 ⑨空操作空控制器 ⑩项目分组

    真实项目开发步骤: 多人同时开发项目,协作开发项目.分工合理.效率有提高(代码风格不一样.分工不好) 测试阶段 上线运行 对项目进行维护.修改.升级(单个人维护项目,十分困难,代码风格不一样) 项目稳 ...

  8. 【翻译】Webpack 4 从0配置到生产模式

    查看原文 webpack 4 发布了! webpack 4 作为一个零配置的模块打包器 webpack 是强大的并且有许多独一无二的特点但是有一个痛点就是配置文件. 在中型到大型项目中为webpack ...

  9. 微信小程序:首页设置方法(开发模式,使用模式)与其他相关设置

    小程序开发并不愉快,许多必建的文件不会自动生成,页面之间的跳转没有快捷键,开发者工具显示区域受限……如果谁有对应的解决办法求告知…… 开始的时候每次保存代码,页面都会刷洗重新渲染一次,而且自动跳回首页 ...

随机推荐

  1. 「LeetCode」0003-Add Two Numbers(Typescript)

    分析 代码 /** * @param {ListNode} l1 * @param {ListNode} l2 * @return {ListNode} */ var addTwoNumbers=fu ...

  2. Navicat 导入sql脚本文件

    Navicat 导入sql脚本文件 我在组建自己工作用的数据库时要导入.sql脚本文件,用cmd窗口导入太慢,navicat的导入向导里又无导入sql脚本的选项, 但不是navicat中没有导入sql ...

  3. spring boot 报错 Error creating bean with name

    Application 启动类 要和父目录平级

  4. lintcode166 链表倒数第n个节点

    链表倒数第n个节点 找到单链表倒数第n个节点,保证链表中节点的最少数量为n. 思路:设置两个指针first,second指向head,first指针先向前走n,然后两个指针一起走,first指针走到末 ...

  5. 利用人脸特征提取DeepID--解读世纪晟人脸识别

    概述:DeepID的目标是人脸验证(判断两张图片是否是一个人),同时衍生出人脸识别(多次人脸验证). DeepID采用增大数据集的方法: 增加新的数据,celebFaces(87628张图片,5436 ...

  6. Leetcode - 461. Hamming Distance n&=(n-1) (C++)

    1. 题目链接:https://leetcode.com/problems/hamming-distance/description/ 2.思路 常规做法做完看到评论区一个非常有意思的做法.用了n&a ...

  7. HDU 4169 Wealthy Family(树形DP)

    Problem Description While studying the history of royal families, you want to know how wealthy each ...

  8. Repair the Wall (贪心)

    Long time ago , Kitty lived in a small village. The air was fresh and the scenery was very beautiful ...

  9. 软件测试基础-Homework1

    The error was in my graduate work which was about game development.I broadcast some messages to the ...

  10. iOS开发应用程序更新

    #import "ViewController.h" //1一定要先配置自己项目在商店的APPID,配置完最好在真机上运行才能看到完全效果哦 #define STOREAPPID ...