webpack4使用mode优化开发环境配置
@subject: webpack mode
@author: leinov
@date: 2018-11-29
mode
webpack的 mode
配置用于提供模式配置选项告诉webpack相应地使用其内置的优化,mode有以下三个可选值
development
production
none
配置
1. 直接写在webpack.config.js配置中
module.exports = {
mode: 'production'
};
2. 作为webpack执行的参数
webpack --mode=production
通过上面的配置,我们就可以在业务代码中通过process.env.NODE_ENV
拿到环境变量值,这里的process.env.NODE_ENV
要跟node的区分,这句等同于
new webpack.DefinePlugin({ "process.env.NODE_ENV": JSON.stringify("development") }),
如果我们在webpack执行命令和webpack配置文件里都没有写入mode配置,在执行webpack时会有如下提示:在没有配置的情况下默认显示production
,这里我们建议大家配置,这样才有区分环境的意义
WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/concepts/mode/
使用
在开发和生产版本有很多不同之处,主要可分下面几种
- 接口不同,后端返回的接口分线上开发
- 编译结果不同,是否分离js,css,是否压缩等
通过mode的设置,我们就可以轻松对开发环境做严格的区分
1.运用于开发和生产的接口区分
package.json
配置
{
"scripts": {
"dev": "webpack-dev-server --mode=development --devtool inline-source-map --hot",
"build":"webpack --mode=production",
},
}
接口前缀根据编译的mode值区分
// 接口前缀配置
let baseUrl = "";
const env = process.env.NODE_ENV;
if(env === "production" || env === "none"){
baseUrl= "https://www.production.com/public/";
}else{
baseUrl= "https://www.development.com/public/";
}
export default baseUrl;
2.运用在编译打包
这是webpack4改进很重要的一点,开发者不需要太多配置,只需要设置好mode
,webpack会根据mode在编译打包时执行不同的操作优化,具体参考官方文档
webpack4使用mode优化开发环境配置的更多相关文章
- 基于webpack4的react开发环境配置
一.基础配置 1.init项目 mkdir react-webpack4-cook cd react-webpack4-cook mkdir src mkdir dist npm init -y 复制 ...
- Tensorflow开发环境配置及其基本概念
Tensorflow开发环境配置及其基本概念 1.1. 安装Tensorflow开发环境 1.1.1. 安装pycharm 1.1.2. 安装pythe3.6 1.1.3. 安装Tensorflow ...
- webpack开发环境配置和生产环境配置
开发环境配置 在开发环境下,我们首先考虑的是方便开发,方便代码调试,不需要考虑代码合并和css样式分离这些. 这里主要说三个 :1.css模块化:2.模块热替换功能:3.source-map(代码映射 ...
- 【webpack学习笔记】a06-生产环境和开发环境配置
生产环境和开发环境的配置目标不一样,生产环境主要是让文件压缩得更小,更优化资源,改善加载时间. 而开发环境,主要是要开发更方便,更节省时间,比如调试比如自动刷新. 所以可以分开配置不同的开发环境,然后 ...
- 超级详细使用Webpack4.X 搭建H5开发环境
超级详细使用Webpack4.X 搭建H5开发环境 会撸码的小马 关注 2018.05.29 17:17* 字数 603 阅读 6453评论 0喜欢 5 很久没弄博客了,这两天有点时间来搞一下最近在弄 ...
- (一)react-native开发系列之Mac开发环境配置
写在前面 在开始之前,先说下选择react-native的背景原因 最近一年来,公司为了节省开发成本,以及降低维护成本,指派我开始做起前端开发app的工作,我和公司的小伙伴们就开始了漫长的app开发之 ...
- 使用U盘安装Linux最美桌面发行版Elementary OS 及常用开发环境配置(JDK,Redis,MySQL,Docker,IDEA,STS)
前言 假期在家无聊,刚好把六年前的一台笔记本电脑利用起来,原来电脑虽然说配置说不上古董机器,但是运行win系统感觉还是不流畅,所幸给换成Linux桌面版系统,在网上查阅了很多,Linux桌面系统要么推 ...
- Elementary OS安装及开发环境配置(一)
前言 假期在家无聊,刚好把六年前的一台笔记本电脑利用起来,原来电脑虽然说配置说不上古董机器,但是运行win系统感觉还是不流畅,所幸给换成Linux桌面版系统,在网上查阅了很多,Linux桌面系统要么推 ...
- Golang(go语言)开发环境配置
VSCode开发环境配置 目录 VSCode开发环境配置 先到VSCode官网去下载适合自己系统的VSCode安装软件 演示在WIndows下 安装使用 演示在Linux(Ubuntu/centos) ...
随机推荐
- [Chrome_Error] (failed) net::ERR_INCOMPLETE_CHUNKED_ENCODING 与 nginx 502 bad gateway
Chrome 浏览器出现这个错误,还出现 nginx 502 bad gateway . 查看 nginx 的 error.log : 2015/12/18 14:34:44 [error] 1448 ...
- INDEX--从数据存放的角度看索引2
在上次<INDEX--从数据存放的角度看索引>中,我们说到"唯一非聚集索引"和“非唯一非聚集索引”在存储上有一个明显的差别:唯一非聚集索引的非叶子节点上不会包含RID的 ...
- php gettext
安装gettext: ubuntu: apt-get install php-gettext, apt-get install gettext window:开启扩展 修改locale :$ /u ...
- VS2010的快捷键乱
vs2010的快捷键乱了,点击回车会出现属性窗口,点击退格键会相当于编辑里面的撤销功能 点击ctrl+s会出现sharepoint窗口,在网上找了一个解决方式(很难找),原问在这: http://q. ...
- 【多线程】:Synchronized和ReentrantLock的对比
相同点: 两者都是可重入锁,同一个线程每进入一次,锁的计数器都自增1,等到锁的计数器下降为0时才能释放锁. 底层实现对比: Synchronized是依赖于JVM实现的,而ReentrantLock是 ...
- ajax post 请求发送 json 字符串
$.ajax({ // 请求方式 type:"post", // contentType contentType:"application/json", // ...
- Shell - 简明Shell入门10 - 管道(Pipe)
示例脚本及注释 #!/bin/bash echo '##### Number of *.conf : ' find /etc -name *.conf | grep system | wc -l ec ...
- 记录cacl()函数中使用scss变量不生效的问题
问题 使用cacl()动态计算元素的高度,运算中包含一个scss变量.如下: height: calc(100% - $ws-header-height); 在浏览器中发现并没有达到预期效果,scss ...
- Yarn 资源调度框架
Yarn 资源调度框架 实现对资源的细粒度封装(cpu,内存,带宽) 此外,还可以通过yarn协调多种不同计算框架(MR,Spark) 概述 Apache Hadoop ...
- maven搭建ssm初级框架
喜欢的朋友可以关注下,粉丝也缺. 前言: 想必大家对smm框架已经熟悉的不能再熟悉了,它是由Spring.SpringMVC.MyBatis三个开源框架整合而成,常作为数据源较简单的web项目的框架. ...