大改动
- 环境
- 不再支持Nodejs 4。源代码已经更新到一个较高的ECMAscript版本。
- 用法
- 现在必须选择在 production 或 development 这两种模式中选择一种，参数
mode或--mode- production 模式会生成最优化的包（bundles）
- development 模式开放注释和提示，并开启eval devtool功能
- production 模式不支持监听模式，development 模式拥有更快速的增量构建
- production 模式也可以把多个模块打包，Scope Hoisting（作用域提升）
- 可以通过
optimization.*的方式去设定更详细的配置（搭建你的自定义模式） process.env.NODE_ENV变量已经在 production 和 development 两种模式中被设置了（只在构建的代码里面，不在配置里）- 有一种隐藏
none模式可以禁用所有内容
- 现在必须选择在 production 或 development 这两种模式中选择一种，参数
- 语法
import()总是返回一个带命名空间的对象。CommonJS模块会被包在export default 中。- 如果使用
import()的方式去导入你的CommonJS模块，这可能会破坏你的代码
- 如果使用
- 配置
- 您不再需要使用这些插件：
NoEmitOnErrorsPlugin->optimization.noEmitOnErrors（production模式默认开启）ModuleConcatenationPlugin->optimization.concatenateModules（production模式默认开启）NamedModulesPlugin->optimization.namedModules（development模式默认开启）
CommonsChunkPlugin已经移除 ->optimization.splitChunks，optimization.runtimeChunk
- 您不再需要使用这些插件：
- JSON
- webpack现在能处理原生的JSON
- 当需要通过 loader 去把 json 转换成 js 的时候，你可能需要添加
type:"javascript/auto" - 不使用 loader 也可以直接使用 JSON
- 当需要通过 loader 去把 json 转换成 js 的时候，你可能需要添加
- 允许通过ESM语法导入JSON
- 未使用的JSON模块导出后会消除
- webpack现在能处理原生的JSON
- 优化
- 更新
uglifyjs-webpack-plugin到 v1- ES2015支持
- 更新
大功能
模块
- webpack 现在支持下面的模块类型：
javascript/auto: （webpack 3 默认值） 所有的 JS 模块规范都可用：CommonJS，AMD，ESMjavascript/esm：EcmaScript 模块规范，其它的模块规范都不可用 (.mjs 文件的默认值)javascript/dynamic: 仅支持 CommonJS 和 AMD，EcmaScript 模块规范不可用json: JSON 数据，使用 require 和 import 导入 JSON 数据时可用 （.json 文件的默认值）webassembly/experimental： WebAssembly 模块（当前还是实验版本）
javascript/esm处理 ESM 时候会比javascript/auto更加严格。- 模块导入进来的名字，必须要在模块中存在。
- 动态模块（非esm，比如CommonJS）只能通过
default导入，其他所有的方式（包括命名空间的导入）都会报错。
- 在
.mjs的模块里面将默认使用javascript/esm模式 - WebAssembly模块
- 可以导入其他模块（JS和WASM）
- 从WebAssembly导出的模块会经过ESM导入验证
- 当你从WASM的导出内容里面尝试导入一个不存在的内容的时候将会活动的警告/错误提示。
- 只能用在异步加载chunk里面，在初始化的chunk里面不能正常工作（对页面性能影响很大）。
- 通过import()的方式去导入WASM模块
- webpack 现在支持下面的模块类型：
优化
sideEffects: false现在已经支持在 package.json 里面使用- package.json里面
sideEffect允许使用glob表达式和glob表达式数组
- package.json里面
JSONP数组已经代替JSONP函数使用 -> 异步脚本标记支持， 顺序不再重要。
- 添加新的选项
optimization.splitChunks
Details: https://gist.github.com/sokra/1522d586b8e5c0f5072d7565c2bee693 - webpack自身移除了废弃的分支代码
- 之前：Uglify移除掉不用的代码
- 现在： webpack移除掉不用的代码（相同情况下）
- 当遇到废弃的分支代码里面含有
import()将会停止移除操作。
- 语法
import()支持黑科技般的注释：webpackInclude和webpackExclude。
他们允许你在使用动态表达式导入的时候过滤掉一些文件。- 使用
System.import()将会提示警告- 你可以通过
Rule.parser.system:true关闭掉这些警告 - 你可以通过
Rule.parser.sustem:false来禁用System.import
- 你可以通过
- 配置
- 可以通过
module.rules[].resolve来配置解析方式。这将会跟全局的配置合并到一起。 optimization.minimize已经被添加到配置里面，通过其开关最小化/压缩功能。- 默认在production模式中开启，默认在development模式中关闭
optimization.minimizer已经被添加到配置里面，通过其去设置压缩处理程序和选项。
- 可以通过
- 使用
- 一些插件的选项已经失效
- CLI已经迁移到了webpack-cli，你需要安装webpack-cli才能使用CLI
- ProgressPlugin插件 (--progress) 现在会打印显示插件的名字
- 至少对已经迁移到新插件系统的插件来说
- 性能
- UglifyJs现在默认缓存和并行化
- 许多的性能提升，尤其是更快的增量构建
- RemoveParentModulesPlugin的性能提升
- Stats
- Stats现在会在有串联的模块中打印显示层级嵌套