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