@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优化开发环境配置的更多相关文章

  1. 基于webpack4的react开发环境配置

    一.基础配置 1.init项目 mkdir react-webpack4-cook cd react-webpack4-cook mkdir src mkdir dist npm init -y 复制 ...

  2. Tensorflow开发环境配置及其基本概念

    Tensorflow开发环境配置及其基本概念 1.1. 安装Tensorflow开发环境 1.1.1. 安装pycharm 1.1.2. 安装pythe3.6 1.1.3. 安装Tensorflow ...

  3. webpack开发环境配置和生产环境配置

    开发环境配置 在开发环境下,我们首先考虑的是方便开发,方便代码调试,不需要考虑代码合并和css样式分离这些. 这里主要说三个 :1.css模块化:2.模块热替换功能:3.source-map(代码映射 ...

  4. 【webpack学习笔记】a06-生产环境和开发环境配置

    生产环境和开发环境的配置目标不一样,生产环境主要是让文件压缩得更小,更优化资源,改善加载时间. 而开发环境,主要是要开发更方便,更节省时间,比如调试比如自动刷新. 所以可以分开配置不同的开发环境,然后 ...

  5. 超级详细使用Webpack4.X 搭建H5开发环境

    超级详细使用Webpack4.X 搭建H5开发环境 会撸码的小马 关注 2018.05.29 17:17* 字数 603 阅读 6453评论 0喜欢 5 很久没弄博客了,这两天有点时间来搞一下最近在弄 ...

  6. (一)react-native开发系列之Mac开发环境配置

    写在前面 在开始之前,先说下选择react-native的背景原因 最近一年来,公司为了节省开发成本,以及降低维护成本,指派我开始做起前端开发app的工作,我和公司的小伙伴们就开始了漫长的app开发之 ...

  7. 使用U盘安装Linux最美桌面发行版Elementary OS 及常用开发环境配置(JDK,Redis,MySQL,Docker,IDEA,STS)

    前言 假期在家无聊,刚好把六年前的一台笔记本电脑利用起来,原来电脑虽然说配置说不上古董机器,但是运行win系统感觉还是不流畅,所幸给换成Linux桌面版系统,在网上查阅了很多,Linux桌面系统要么推 ...

  8. Elementary OS安装及开发环境配置(一)

    前言 假期在家无聊,刚好把六年前的一台笔记本电脑利用起来,原来电脑虽然说配置说不上古董机器,但是运行win系统感觉还是不流畅,所幸给换成Linux桌面版系统,在网上查阅了很多,Linux桌面系统要么推 ...

  9. Golang(go语言)开发环境配置

    VSCode开发环境配置 目录 VSCode开发环境配置 先到VSCode官网去下载适合自己系统的VSCode安装软件 演示在WIndows下 安装使用 演示在Linux(Ubuntu/centos) ...

随机推荐

  1. JMS学习以及jms的实现activeMq

    1.JMS规范介绍: http://www.cnblogs.com/hapjin/p/5431706.html http://elim.iteye.com/blog/1893038 http://bl ...

  2. 解决rpm conflicts with file from package的两个方法

    1.卸载掉冲突的文件,安装新的文件.如果由于由于依赖关系导致要卸载很多软件,那可以优先考虑下一个方法. 2.安装的时候增加–replacefiles参数,例如 rpm -ivh xxx.rpm –re ...

  3. DevExpress的TcxDBLookupComboBox使用方法及问题

    使用TcxDBLookupComboBox需要设置以下属性: 1.DataBinding.DataSource:数据感知控件的数据源. 2.DataBinding.DataField:数据感知控件的连 ...

  4. RocketMQ概述

    概述 ApacheRocketMQ是一个低延时.高性能.可靠.海量并且灵活扩展性的分布式消息和流平台,于2017年9月25日成为Apache基金会顶级开源项目.它由4个部分组成:name server ...

  5. ionic3.x angular4.x ng4.x 自定义组件component双向绑定之自定义计数器

    本文主要示例在ionic3.x环境下实现一个自定义计数器,实现后最终效果如图: 1.使用命令创建一个component ionic g component CounterInput 类似的命令还有: ...

  6. 企业项目开发--cookie(2)

    此文已由作者赵计刚授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 2.1.3.CookieUtil:(cookie的基本操作:增删查,注意没有改)  1 package co ...

  7. python3之paramiko模块

    1.paramiko模块介绍 paramiko模块提供了基于ssh连接,进行远程登录服务器执行命令和上传下载文件的功能.这是一个第三方的软件包,使用之前需要安装. 2.paramiko的使用方法 (1 ...

  8. jQuery基础(4)- 位置信息、事件流、事件对象、事件代理、jquery事件

    一.jQuery的位置信息 jQuery的位置信是JS的client系列.offset系列.scroll系列封装好的一些简便api. 1.宽度和高度 a.获取宽度和高度,例如: .width() // ...

  9. vue-cli初始化一个项目

    1,换成淘宝源: npm config set registry https://registry.npm.taobao.org/ 检查是否修改成功 npm config get registry 2 ...

  10. node.js中的回调

    同步和阻塞:这两个术语可以互换使用,指的是代码的执行会在函数返回之前停止.如果某个操作阻塞,那么脚本就无法继续,这意味着必须等待. 异步和非阻塞:这两个术语可以互换使用,指的是基于回调的.允许脚本并行 ...