本文长期更新，如有错误，还请指正！
关注一下不迷路 =.=
什么是mode
webpack4增加了mode配置项，这样会做一些默认的工作，一定程度上解决了webpacke配置复杂的弊端。
语法
mode:'development|production'
不配置默认是production，这是2种模式都会做下工作
//parent chunk中解决了的chunk会被删除
optimization.removeAvailableModules:true
//删除空的chunks
optimization.removeEmptyChunks:true
//合并重复的chunk
optimization.mergeDuplicateChunks:true
development
开发模式，即在开发时使用此模式，主要做了以下工作（了解即可）
1 . 默认配置以下插件
//官方给的
plugins: [
new webpack.NamedModulesPlugin(),
new webpack.DefinePlugin({ "process.env.NODE_ENV": JSON.stringify("development") }),
]
2 . 其他配置（网上的）
- 开启dev-tool，方便浏览器调试（不需要再配置devtool: 'inline-source-map'）
- 开启output.pathinfo，在产出的bundle中显示模块路径信息
- 开启NamedModulesPlugin（热加载不需要再配）
- 开启NoEmitOnErrorsPlugin
- 提供详细的错误提示
- 利用缓存机制，实现快速构建
下面这个貌似更全些
//调试
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
产品模式，即项目上线时用使用这个模式打包，主要做了以下工作（了解即可）
1 . 默认配置以下插件（官方给的）
plugins: [
// 代码压缩
new UglifyJsPlugin(/* ... */), //不需要再配置压缩
new webpack.DefinePlugin({ "process.env.NODE_ENV": JSON.stringify("production") }),
new webpack.optimize.ModuleConcatenationPlugin(),
new webpack.NoEmitOnErrorsPlugin()
]
2 . 其他配置（网上的）
//性能相关配置
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=production
网友评论