webpack4 Mode的默认设置

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