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) ...
随机推荐
- [leetcode 8] String to Integer
1 题目: Implement atoi to convert a string to an integer. Hint: Carefully consider all possible input ...
- 使用EF操作Oracle数据库小计
1.建表 CREATE TABLE item.ORDERS( ORDERID ) CONSTRAINT PK_ORDERS PRIMARY KEY, ORDERNO ), STOREID ), STO ...
- C#Winfrom数据库读取日期(年月日格式转换)
显示类型:2018-6-1 //说明:data_time.Text 控件名文本值 :dataset.Tables[0].Rows[0]["art_time"] 数据集.表名.[行 ...
- 【转】MySQL表名大小写敏感导致的问题
原文地址:https://blog.csdn.net/postnull/article/details/72455768 最近在项目中遇到一个比较奇怪的小问题.在开发过程中自己测试没有问题,但是提测后 ...
- 【CS】笔试常见题目
网络 IP地址分类 常见网络协议 HTTP状态码 算法 排序问题总结 git git和svn的区别 git常用命令 git暂存区,工作区等 一.网络 1. IP地址分类: IP网络使用32位地址,以点 ...
- Codeforces 1058 D. Vasya and Triangle(分解因子)
题目:http://codeforces.com/contest/1058/problem/D 题意:有一个大小为N*M的矩阵内,构造一个三角形,使面积为(n*m)/k.若存在输出三个顶点(整数). ...
- drf-视图的理解
1. 类视图 写视图的步骤: 1. 数据库查询, 2. 构建序列化器, 进行序列化操作, 返回数据 一. 两大基类 >1 APIView (以常规的方法实现get po ...
- Synchronzied(内置锁)
原文地址:深入JVM锁机制1-synchronized 1. 线程的状态与转换 当多个线程同时请求某个对象监视器时,对象监视器会设置几种状态用来区分请求的线程: Contention List:所有请 ...
- Redis---ZipList(压缩列表)
1.概述 压缩列表是一块连续的内存空间,元素之间紧挨着存储,没有任何冗余空间. Redis 为了节约内存空间使用,zset 和 hash 容器对象在元素个数较少的时候,采用压缩列表 (ziplist) ...
- 解决微信小程序要求的TLS版本必须大于等于1.2的问题
一.环境: CentOS 6.8 nginx 1.6.0 php 7.0.10 二.背景 最近开发一个小程序,而小程序对后台接口服务器的要求是: 1.请求域名在request合法域名中 2.基于 ht ...