webpack4入门笔记——打包模式选择

什么是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
复制代码