webpack 5 mode的作用和区别

通过选择 developmentproduction 或 none 之中的一个,来设置 mode 参数,你可以启用 webpack 内置在相应环境下的优化。其默认值为 production

会将 DefinePlugin 中 process.env.NODE_ENV 的值设置为 developmen或者production. 为模块和 chunk 启用有效的名。

例如js文件里面打印 process.env.NODE_ENV会得到你配置的值

development和production的区别

代码编译后的结果不同

development模式

development模式会把js内容放到eval里面执行,打包后的js文件内容如下:

eval的作用是动态执行js,这样可以方便动态更新里面的内容

((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {eval("__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _sum__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./sum */ \"./src/sum.js\");\n\nconsole.log(\"dsfasdf\")\nconst result = (0,_sum__WEBPACK_IMPORTED_MODULE_0__[\"default\"])([1, 2]);\nconsole.log(\"result\", result)\nconst result2 = (0,_sum__WEBPACK_IMPORTED_MODULE_0__[\"default\"])([1, 2, 3]);\nconsole.log(\"result\", result2)\nconsole.log(\"env\", \"development\")\n\n//# sourceURL=webpack://demo1/./src/main.js?");});
production模式

则是编译后的纯代码

(()=>{"use strict";
const o=o=>o.reduce(((o,s)=>o+s),0);
console.log("dsfasdf");
const s=o([1,2]);
console.log("result",s);
const c=o([1,2,3]);
console.log("result",c),
console.log("env","production")
})();

production开启内部插件,development没有

  • FlagDependencyUsagePlugin:编译时标记nodemodule依赖 unused harmony export ,用于 Tree shaking(移除没有使用到的代码)
  • FlagIncludedChunksPlugin 编译时候标记,移除chunks中没有使用到的代码(文件分割后输入的文件叫做chunk文件)
  • ModuleConcatenationPlugin:在webpack打包时,将bundle 内各个模块预编译到一个闭包中,提升代码在浏览器中的执行速度(相比之前的打包方式—每个模块都是一个闭包)
  •   NoEmitOnErrorsPlugin:在编译出现错误时,跳过输出阶段。这样可以确保输出资源不会包含错误

实战

初始化npm项目

npm init -y     

目录下生成了package.json 文件

安装webpack依赖

npm i webpack weblack-cli -D

新建src/main.js,内容如下:

import sum from "./sum"
console.log("dsfasdf")
const result = sum([1, 2]);
console.log("result", result)
const result2 = sum([1, 2, 3]);
console.log("result", result2)
console.log("env", process.env.NODE_ENV)

新建src/sum.js,内容如下:

var sum = (arr) => arr.reduce((pre, curr) => {pre += curr;return pre;
}, 0)
export default sum;

执行命令:

npx webpack ./src/mian.js ---mode=development

得到目录/.dist/main.js,内容如上面所述的development模式的内容

执行命令:

npx webpack ./src/mian.js ---mode=production

得到目录/.dist/main.js,内容如上面所述的production模式的内容

输入内容为空

如果main.js文件内容如下

var sum = (arr) => arr.reduce((pre, curr) => {pre += curr;return pre;
}, 0)
export default sum;
在production模式下输出文件内容为空,因为开启了FlagIncludedChunksPlugin模块,移除了没有被调用的代码

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/593851.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

JUC原子操作类

原子操作类 基本类型原子类:AtomicInteger、AtomicBoolean、AtomicLong,常见API: get 获取当前值getAndSet 获取当前的值,并设置新的值getAndIncrement 获取当前的值,并自增getAndDecrement 获取当前的值,并…

洗地机怎么选?哪款洗地机好用?

选择洗地机前,我们需要对自己购买洗地机的需求做一个清洗的判断,吸尘器和扫地机智能解决地面基本的清洁问题,作为新兴的清洁工具洗地机越来越受大家的喜欢,洗地机的品类很多,洗地机到底该买哪款呢?我们先来看看挑选洗…

【现代控制理论】浙江大学 王建全教授

博主主页还有其他上万字精品笔记,欢迎自取 ​编辑P1[1.1.1]--视频:绪论.mp4_高清 1080P 11:19 这个视频是浙江大学的一门精品课程,主要介绍了现代控制理论的基本概念和发展历程。课程包括非线性系统理论、随机控制理论、自适应控制、模糊控制、鲁棒控制…

死锁-第三十四天

目录 什么是死锁 进程死锁、饥饿、死循环的区别 死锁产生的必要条件 什么时候会发生死锁 死锁的处理策略 本节思维导图 什么是死锁 每一个人都占有一个资源,同时又在等待另一个人手里的资源 进程死锁、饥饿、死循环的区别 死锁:各进程互相等待对…

drf序列化与序列化器的使用

序列化类的使用 使用序列化类实现五个接口功能,但是我们发现并没有做数据校验,也没有做反序列化,是我们自己手动去进反序列化,是我们自己使用for来进行拼接的,很不方便,我们可以使用一个drf自带的名叫序列…

ASP.Net实现海鲜添加(三层架构,异常处理)

演示功能: 点击启动生成页面 点击添加跳转新界面 此处设置文本框多行 点击Button添加 步骤: 1、建文件 下图是三层架构列表,Models里面有模拟数据库中列的类,DAL中有DBHelper和service,BLL中有BllManager文件用于ui界面直接调用…

SpringBoot之多环境开发配置

1 多环境开发配置 问题导入 在实际开发中,项目的开发环境、测试环境、生产环境的配置信息是否会一致?如何快速切换? 1.1 多环境启动配置 yaml文件多环境启动 不同环境使用—隔开 示例代码: spring:profiles:active: dev#生产…

易天推出10G SFP+ 可调 DWDM光模块:网络通信新升级

随着网络技术的飞速发展,为了满足用户对高速数据传输日益增长的需求。易天研发团队在原来的基础上推出了全新升级的10G SFP 可调 DWDM光模块,本文将详细介绍这款新升级光模块的特点、优势以及应用场景。 易天光通信10G SFP 可调 DWDM光模块具有出色的波…

三、C#面向对象编程(继承与多态)

在C#中,面向对象编程(OOP)是编程的基本范式,它使用类和对象的概念来构建软件应用程序。面向对象编程的三个主要特性是封装、继承和多态。 封装:封装是将数据(属性)和操作数据的函数(…

大数据学习(31)-Spark非常用及重要特性

&&大数据学习&& 🔥系列专栏: 👑哲学语录: 承认自己的无知,乃是开启智慧的大门 💖如果觉得博主的文章还不错的话,请点赞👍收藏⭐️留言📝支持一下博主哦&#x1f91…

项目中接入神策埋点

项目中接入神策埋点(免费),react和vue通用 1、下包 使用npm 或 yarn 或 pnpm 安装依赖 npm install --save sa-sdk-javascript 2、初始化准备: 定义环境变量 VITE_PROJECT_ENV (prod demo test) 3、初始化神策 在 utils 文…

QT基础知识

QT基础知识 文章目录 QT基础知识1、QT是什么2、Qt的发展史3、为什么学习QT4、怎么学习QT1、工程的创建(环境的下载与安装请百度)2、创建的工程结构说明3、怎么看帮助文档1、类使用的相关介绍2. 查看所用部件(类)的相应成员函数(功…

为什么说 $mash 是 Solana 上最正统的铭文通证?

早在 2023 年的 11 月,包括 Solana、Avalanche、Polygon、Arbitrum、zkSync 等生态正在承接比特币铭文生态外溢的价值。当然,因铭文赛道过于火爆,当 Avalanche、BNB Chain 以及 Polygon 等链上 Gas 飙升至极值,Arbitrum、zkSync 等…

多任务并行处理相关面试题

我自己面试时被问过两次多任务并行相关的问题: 假设现在有10个任务,要求同时处理,并且必须所有任务全部完成才返回结果 这个面试题的难点是: 既然要同时处理,那么肯定要用多线程。怎么设计多线程同时处理任务呢&…

.babky勒索病毒解密方法|勒索病毒解决|勒索病毒恢复|数据库修复

导言: 网络安全威胁不断进化,其中.babky勒索病毒引起了广泛关注。这篇文章91数据恢复将深入介绍.babky的狡猾特征,以及在遭受其袭击时如何高效地恢复被加密的数据,并提供实用的预防方法。当面对被勒索病毒攻击导致的数据文件加密…

基于Java课程作业管理系统

基于Java课程作业管理系统 功能需求 1、作业发布:系统需要支持教师发布作业,包括作业题目、要求、截止日期等信息。 2、作业提交:学生可以通过系统提交作业,系统需要支持多种文件格式的上传,并能够自动保存提交记录…

vue-vuex持久化处理

在src/utils文件夹下,创建storage.js文件 // 约定一个通用的键名 const INFO_KEY hm_shopping_info// 获取个人信息 export const getInfo () > {const defaultObj { token: , userId: }const result localStorage.getItem(INFO_KEY)return result ? JSON…

proteus元器件搜索

proteus元器件搜索 常用元器件类 电阻:Resistor 可变电阻:Variable Resistor 电位器 :potentiometer 三极管:在Transistors里查找,可以用指定的型号搜索,比如2N3904。也可使用npn和pnp查找。 二极管&…

Linux 网络系统管理 技能大赛 DNS赛题配置

主DNS服务部署 yum -y install bind bind-chroot bind-utils systemctl start named //开启named systemctl enable named //开机自启动 ss -tnl |grep 53 //查看端口是否正常启动 vim /etc/named.conf //编辑全局配置文件listen-on port 53 {any;}; //监听所有…

java多线程及线程锁

概述 程序(program):为完成特定任务,用某种语言编写的一组指令的集合。即指一段静态的代码,静态对象。 进程(process):程序的一次执行过程,或是正在内存中运行的应用程序…