玩转 webpack 学习笔记
webpack5 在 2020-10-10 正式发布
官网:https://webpack.js.org/blog/2020-10-10-webpack-5-release/
功能清除
require.include
语法已经被废弃长期缓存
开发支持
支持崭新的 web 平台特性
optimization.usedExports
优化丢弃,属性会被 optimization.mangleExports
优化打乱new URL("./image.png", import.meta.url)
(新方式)import url from "./image.png")
(老方法)new Worker(new URL("./image.png", import.meta.url))
浏览器默认支持的语法new webpack.experiments.schemesHttp(s)UriPlugin()
选择加入支持安全的 node.js 生态特性解析
构建优化
性能优化
下面选取一些分析一下。
最低支持的 Node.js 版本从 6 增加到 10.13.0
所有在 webpack4 里面被废弃的能力都被清除,因此需要确保 webpack4 没有打印警告 。
requre.includes
语法已被废弃(作用:实现一个模块预加载)
Rule.parser.requirelnclude
将行为改为允许、废弃或禁用。之前的版本是:如果某个模块依赖 Node.js 里面的核心模块,那么这个模块被引入的时候会把 Node.js 整个 polyfill 顺带引入。
webpack4:里面利用 node-libs-browser 这个实现 polyfill 的。
webpack5
在生产模式下,默认的 chunklds: "deterministic", modulelds:“deterministic"
。设置成 deterministic
时默认最小3位数字会被使用
选项值 | 描述 |
---|---|
natural | 按使用顺序的数字 id。 |
named | 对调试更友好的可读的 id。 |
deterministic | 在不同的编译中不变的短数字 id。 有益于长期缓存。在生产模式中会默认开启。 |
size | 专注于让初始下载包大小更小的数字 id。 |
total-size | 专注于让总下载包大小更小的数字 id。 |
选项值 | 描述 |
---|---|
natural | 按使用顺序的数字 id。 |
named | 对调试更友好的可读的 id。 |
deterministic | 在不同的编译中不变的短数字 id。 有益于长期缓存。在生产模式中会默认开启。 |
size | 专注于让初始下载包大小更小的数字 id。 |
例子:
webpack4:1,2,3...
递增的方式
webpack5:数字是确定的,比如多个 import 模块时,不会因为一个变化了而产生变化。
在 webpack4 里面,可以使用 cache-loader 将编译结果写入硬盘缓存,还可以使用 babel-loader,设置 option.cacheDirectory
将 babel-loader 编译的结果写进磁盘。
node_ modules/.cache/webpack
,最大 500 MB, 缓存时常两个星期,旧的缓存先淘汰例子:module.js 里使用了 inner.js,然后 user.js 里使用了 module.js 文件
webpack4:
webpack5:
例子:usingSomething 里使用了 something,test 里使用了 usingSomething,但是 test 未被使用。
webpack4 会打包进去
webpack5 里可以分析模块之间的关系(内部通过一个 innerGraph 算法
去实现),上面不会打包
webpack4 之前只生成 ES5 的代码。
webpack5 则现在既可以生成 ES5 又可以生成 ES6/ES2015
代码。
两种设置方式:5 =< ecmaVersion <= 11
或 2009 =< ecmaVersion <= 2020
比如:写 2015 也是可以的
发明者:Zack Jackson
模块联邦可以实现微前端。
基本解释:使一个 JavaScript 应用在运行过程中可以动态加载另一个应用的代码, 并支持共享依赖(CDN)。不再需要本地安装 Npm 包。
一个应用可以是 Host,也可以是 Remote,也可以同时是 Host 和 Remote。
Webpack 内部通过 ModuleFederationPlugin 插件将多个应用结合起来。
${name}/${expose}
的方式使用应用 host:要去消费 app2,端口号 3002
应用 remote:提供了 Button 组件
浏览器的效果
app1 应用使用了 app2 的 Button 组件端口为 3001
app2 应用端口为 3002
app1 怎么找到 app2 的?
通过 remoteEntry.js 找到生产者的模块。
app2 提供了 button
app1 使用 button
这样就达到了组件的共享。
打包构建之后,可以看到 remoteEntry.js 里面有 moduleMap,并且提供了get 方法。