webpack4 Mode的默认设置

wua_wua2012 发布于2019-08-22 15:21 / 910人阅读

摘要：功能强大，有很多独特的功能，但其中一个难点是配置文件。为此团队改变了这一现状默认不需要配置文件。每个选项的默认配置如下指两个配置项都存在的属性中解决了的会被删除删除空的合并重复的调试缓存模块避免在未更改时重建它们。

webpack功能强大，有很多独特的功能，但其中一个难点是配置文件。为此,webpack团队改变了这一现状：webpack 4默认不需要配置文件。可以通过mode选项为webpack指定一些默认的配置。mode分为development/production,默认为production。每个选项的默认配置如下(common指两个配置项都存在的属性):

common

//parent chunk中解决了的chunk会被删除
optimization.removeAvailableModules:true
//删除空的chunks
optimization.removeEmptyChunks:true
//合并重复的chunk
optimization.mergeDuplicateChunks:true

development

//调试
devtool:eval
//缓存模块, 避免在未更改时重建它们。
cache:true
//缓存已解决的依赖项, 避免重新解析它们。
module.unsafeCache:true
//在 bundle 中引入「所包含模块信息」的相关注释
output.pathinfo:true
//在可能的情况下确定每个模块的导出,被用于其他优化或代码生成。
optimization.providedExports:true
//找到chunk中共享的模块,取出来生成多带带的chunk
optimization.splitChunks:true
//为 webpack 运行时代码创建多带带的chunk
optimization.runtimeChunk:true
//编译错误时不写入到输出
optimization.noEmitOnErrors:true
//给模块有意义的名称代替ids
optimization.namedModules:true
//给模chunk有意义的名称代替ids
optimization.namedChunks:true

production

//性能相关配置
performance:{hints:"error"....}
//某些chunk的子chunk已一种方式被确定和标记,这些子chunks在加载更大的块时不必加载
optimization.flagIncludedChunks:true
//给经常使用的ids更短的值
optimization.occurrenceOrder:true
//确定每个模块下被使用的导出
optimization.usedExports:true
//识别package.json or rules sideEffects 标志
optimization.sideEffects:true
//尝试查找模块图中可以安全连接到单个模块中的段。- -
optimization.concatenateModules:true
//使用uglify-js压缩代码
optimization.minimize:true

webpack运行时还会根据mode设置一个全局变量process.env.NODE_ENV,这里的process.env.NODE_ENV不是node中的环境变量,而是webpack.DefinePlugin中定义的全局变量,允许你根据不同的环境执行不同的代码.

例如:

if(process.env.NODE_ENV === "development"){
    //开发环境 do something
}else{
    //生产环境 do something
}

最终将编译成

if(true){
   //开发环境 do something
}else{
   //生产环境 do something
}

生产环境下,uglify打包代码时会自动删除不可达代码,也就是说生产环境压缩后最终的代码为:

  //生产环境 do something

云服务器 GPU云服务器默认设置设置默认按钮默认首页设置应用设置默认

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/93401.html

webpack4新特性介绍

摘要：当下最流行的模块打包器于年月日正式发布版本，代号。从官方的发布日志来看本次大版本更新带来了很多新特性更新和改善，这将会让的配置更加简单。本文，笔者将会全面介绍的新特性及实践。只支持模块，目前处于试验阶段。导语: webpack是一个JS应用打包器, 它将应用中的各个模块打成一个或者多个bundle文件。借助loaders和plugins，它可以改变、压缩和优化各种各样的文件。它的输入...

NotFound 2019-08-22 15:42 评论0 收藏0
webpack4.0初体验、各版本及parcel性能对比

摘要：前段时间又发布了新版本我接触的时候已经版本了支持的版本必须打包速度大小比较以及粗浅的试了一下下图所示，黄色为版本绿色为我写的配置，跟基本相似，具体不同下面会介绍蓝色是自带的模式红色为具体大小速度大家可以比较一下，还是很给力的关于配置方面，应前段时间webpack又发布了新版本webpack4我接触的时候已经4.1版本了node支持的版本必须node: >=6.11.5 webpack...

MarvinZhang 2019-08-22 15:11 评论0 收藏0
webpack4 配置解析和实战

摘要：特性比较热门的两大特性，零配置和速度快号称提速上限一般情况下，相比于低版本，场景下第三方依赖打包速度和场景下本地服务首次启动速度都得到显著提升零配置通过指定当前场景为开发模式还是生产模式，自动设置好当前场景的默认配置，用户即可马上使用，不需 webpack4特性 webpack4比较热门的两大特性，零配置和速度快（号称提速上限98%）一般情况下，webpack4相比于低版本，prod...

王笑朝 2019-08-26 12:09 评论0 收藏0
如何优雅的升级到 webpack4

摘要：默认出入口在中，不再强制要求指定和路径。构建模式提供了两种构建模式可供选择和选项描述会将的值设为。如果是，那就会开启。默认只会对按需加载的代码做分割。在或更低版本中，如果你想为一个推导出来的定制选项，你不得不在自己的选项中将它重复一遍。前言现在距离2018年2月15号webpack4.0.0出来已经有一段时间了，现在已经出了 @vue/cli 3.0，但是楼主还没试过，听说很强大，...

zhangfaliang 2019-08-22 18:36 评论0 收藏0
webpack@4.32.2研究笔记【02】- mode

摘要：简介模式是新增的配置，用来指定使用对应模式的内置优化它有三个可选模式默认为。源码地址选项描述通过插件将的值设为。启用和通过插件将的值设为。使用默认的优化项。注意上面说的并不是的运行环境变量，它其实是通过插件设置的一个全局变量。简介 mode（模式）是webpack4.0.0新增的配置，用来指定webpack使用对应模式的内置优化；它有三个可选模式：producti...

newtrek 2019-08-23 17:51 评论0 收藏0