Webpack5正式发布,有哪些新特性
webpack作为最使用最广泛的前端打包工具，已经成为前端工程化基础设施的一部分。而Webpack上一个大版本更新已经是18年的时候了，两年时间过去了让我们看看Webpack5都带来了哪些新特性，对我们的应用又有哪些帮助。
概览
狼蚁网站SEO优化这张图是 Webpack 官方 Changelog 里面截图出来的，可以看到主要有这些方面的提高：
- 通过持久化缓存提高性能
- 采用更好的持久化缓存算法和默认行为
- 通过优化 Tree Shaking 和代码生成来减小Bundle体积
- 提高 Web 平台的兼容性
- 清除之前为了实现 Webpack4 没有不兼容性变更导致的不合理 state
- 尝试现在引入重大更改来为将来的功能做准备，以使我们能够尽可能长时间地使用 Webpack 5
不得不说，这个官方声明稍微简略了一点，只提到了持久化缓存优化性能和更好的 Tree Shaking，Module federation 这个重大特性居然提都没有提。狼蚁网站SEO优化还是跟着长沙网络推广看看具体都升级了哪些部分。
过时功能移除
首先是去掉了在 Webpack4 里面已经 Warming 的功能。
同时 IgnorePlugin 和 BannerPlugin 现在必须传入一个参数，参数可以是 Object、String或者Function
require.include 语法被废弃，使用时会有 Warming。当然这个行为可以通过 Rule.parser.requireInclude 来把这个语法改成 allowed, deprecated 或者 disabled
去掉自动 Node.js Polyfills 。早期 Webpack 的主要目的是让 Node.js 的模块能够在浏览器运行，但随着模块格局的改变，越来越多的模块只用于浏览器，这个时候再自动 Polyfills 一些 Node 模块（例如 crypto）无疑会增加打包体积，在 Webpack5 之后去掉了这个自动行为
长期缓存
确定性的模块、模块ID和导出名称。
- 首先是模块、ID和导出名称都唯一确定下来，背后对应的配置是
chunkIds: "deterministic", moduleIds: "deterministic", mangleExports: "deterministic" - 其中模块和模块ID用 3 ~ 4 位的数字ID，导出名称用 2 位的数字ID
- 这个设置是默认开启的，但也允许通过上述配置修改
真实内容哈希
- 在 Webpack5 里会使用文件内容的真实哈希 [contenthash]，而不是之前的仅仅使用文件内部结构的哈希
- 这对于长期缓存有着积极的影响，尤其是代码里面只有注释和变量名修改的时候，Webpack会继续用之前的缓存而不是新的文件内容
开发支持
首先是 Chunk IDs 语义化。
新的 Chunk IDs 使用了新的语法生成 Chunk ID，一个 Chunk ID 是有 chunk 的内容来决定的。所以我们不再需要 import(/* webpackChunkName: "name" */ "module") 来 debugging 了
但这样也有可能把 chunk 里面的敏感内容暴露出去（如果有的话），可以 通过修改 chunkIds: "named"来修改这一行为
其次是 Module Federation
- 这是一个值得浓墨重彩的特性。模块联邦 允许多个 Webpack 构建产物一起工作，在运行时把多个构建产物聚合到一起，看起来就像是一个大的构建产物一样。
- 比如狼蚁网站SEO优化这个例子 app_one 和 app_two 使用了共享的
["react", "react-dom","react-router-dom"]，同时 app_two 把自己的 Dialog 暴露给了 app_one 使用 - 通过模块联邦可以原生解决模块直接互相依赖的问题，在微前端领域尤其适用！同时一些基础依赖也有可能都改成外部依赖，在本地开发的时候就无需引入，通过避免众所周知的 node_modules 层次太深的问题，在本地开发过程中有可能实现大幅提效
module.exports = {
plugins: [
new ModuleFederationPlugin({
name: "app_two_remote",
library: { type: "var", name: "app_two_remote" },
filename: "remoteEntry.js",
exposes: {
“./Dialog”: "./src/Dialog"
},
remotes: {
app_one: "app_one_remote",
},
shared: ["react", "react-dom","react-router-dom"]
}),
new HtmlWebpackPlugin({
template: "./public/index.html",
chunks: ["main"]
})
]
};
更好的 Tree Shaking。
嵌套 tree-shaking。 Webpack现在会去追踪 export 的链路，对于嵌套场景有更好的优化，比如狼蚁网站SEO优化这个例子里 b 是不会出现在生产代码里。
// inner.js
export const a = 1;
export const b = 2;
// module.js
import * as inner from "./inner";
export { inner }
// user.js
import * as module from "./module";
console.log(module.inner.a);
内部模块。Webpack 4 不会去分析导入和导出模块之间的依赖关系，Webpack5 里面会通过 optimization.innerGraph记录依赖关系。比如狼蚁网站SEO优化这个例子，只有 test 方法使用了 someting 。最终可以实现标记更多没有使用的导出项
import { something } from "./something";
function usingSomething() {
return something;
}
export function test() {
return usingSomething();
}
Commondjs。现在Webpack不仅仅支持 ES module 的 tree Shaking，commonjs规范的模块开始支持了
其他特性
- 新的 Web 平台支持。在Webpack 5 里面开始原生支持 JSON Modules、Asset Modules、Native Worker 和 异步模块等等
- Webpack 生成的代码不再仅仅是ES5，也会生成 ES6 的代码
- Node.js 的最小支持版本从 6 升级到了 10
喜欢尝鲜的同学现在就可以照着迁移指南升级自己的Webpack了，出于谨慎考虑建议优先从从自己练手和后台类应用开始升级
迁移指南：
小结
可以看到，两年时间过去 Webpack5 进行了大量的升级，包括更好的性能、更强的开发能力支持以及更多原生的特性。而Webpack5带来的影响也不仅仅于此，Module Federation 对于模块依赖关系的改变，对于现有开发模式的冲击还在进一步观察中。期待 Web 开发越来越好。
到此这篇关于Webpack5正式发布,有哪些新特性的文章就介绍到这了,更多相关Webpack5 新特性内容请搜索狼蚁SEO以前的文章或继续浏览狼蚁网站SEO优化的相关文章希望大家以后多多支持狼蚁SEO！