- Webpack5 移除了 Node.js Polyfill，将会导致一些包变得不可用（会在控制台输出
'XXX' is not defined），如果需要兼容 process 等 Nodejs Polyfill，则要安装相关的 Polyfill：process，并在 Plugin 中显式声明注入
// webpack.config.js
{
…,
plugins: [
…,
new webpack.ProvidePlugin({
process: ‘process/browser’,
}),
]
}
-
如果你在使用 Webpack5 的时候遇到一些 API 的弃用警告，可以果断搜索 Google，一般都是让你升级一些 Plugin 就完全能够解决问题了，并且这些 warning 现阶段并不会对你的构建产生什么破坏性的影响，以下我们提供了一些我们实践中沉淀的参考：
-
- 升级 terser-webpack-plugin 能解决的 Warning:
-
- Compilation.cache was removed
-
optimizeChunkAssets
-
升级 mini-css-extract-plugin 能够解决的 warning:
-
- MainTemplate.hooks.renderManifest
-
ChunkTemplate.hooks.renderManifest
-
MainTemplate.hooks.hashForChunk
-
Module.id: Use new ChunkGraph API
-
Module.updateHash
-
Chunk.modulesIterable
-
MainTemplate.outputOptions
-
MainTemplate.renderCurrentHashCode
-
MainTemplate.getAssetPath
-
MainTemplate.requireFn
-
ChunkGroup.getModuleIndex2 was renamed to getModulePostOrderIndex
做好了前面这些准备之后，我们就可以直接升级一把梭：
npm install webpack@latest --dev
接下来，就可以开始尝试令人心动的 Webpack5 啦～
踩坑日记
生态对齐 Webpack5
如果你的项目升级了 Webpack5 之后直接在项目中启动构建或者 devServer，你一般会收到类似下面这样的报错信息：
TypeError: Cannot add property htmlWebpackPluginAlterChunks, object is not extensible
at /path/to/node_modules/html-webpack-plugin/index.js:59:56
如果是 Webpack 老司机应该就会一眼发现这个问题的关键所在 —— html-webpack-plugin，打开 Plugin 的 Github 首页[4]，解决方案就摆在你的眼前了：
同理，一般在控制台如果有抛出 error 或者 warning，大多都能通过升级对应依赖的版本解决问题，Webpack5 的升级还是要比当年 Webpack4 的升级来得丝滑许多，并且社区上的生态也在逐步跟进和完善。
这里再举几个比较常见的例子，比如我们常用来支撑 serviceWorker 的 workbox-webpack-plugin，因为它内部也依赖了 Webpack 的核心事件以及一些 API，因此也需要进行升级，这里可以参考：https://github.com/GoogleChrome/workbox/issues/2669；还有我们平时用来压缩 CSS 的 optimize-css-assets-webpack-plugin[5]，在 Plugin Github 首页中也明确表示了在 Webpack5 之后优先使用 Webpack 官方出品的 css-minimizer-webpack-plugin[6]。
当然，还有一些其他生态对齐的点就不在这个文档里再做赘述了，大部分内容你都可以在官网介绍[1]以及升级手册[2]这两份官方文档中找到，并且，如果有一些需要 case by case 去解决的通用问题，社区上大多也已经有 issue 或者其他文档中可以发现线索，当然，如果被你发现了一些“待解决”的问题，不也正是你向开源社区贡献力量的机会嘛～
基本上完成了上面这些依赖的升级，你的项目就能通过 Webpack5 跑起来了。
PS：optimize-css-assets-webpack-plugin[5] 这插件既没有 cache 又没有 parallel，就我而言，我宁可在 loader 里使用 cssnano 做 CSS 逻辑优化，也不愿意在这个插件上无奈地浪费生命 ???，但是 css-minimizer-webpack-plugin[6] 解救了强迫症的我，它真的是再好不过的选择了。
一碰就挂的 HMR
由于 webpack-dev-server 依赖了很多 Webpack 构建配置，所以在升级之后，不免有些地方没有对接地那么丝滑，HMR 就是一个最形象的例子，它变得十分脆弱，往往在不知不觉中，你会突然发现，这东西咋没反应了？！
我的第一直觉是认为自己是不是忽略了什么 devServer 的配置，但我不是照着官方文档 CV 的嘛？！冷静下来后我点开了 Google，果然，社区上早有前人遇到了同样的问题[7]。
这里我就长话短说了，这是 webpack-dev-server 遗留的一个 BUG，只有你在 Webpack 配置中显式地设置了 target: 'web'，HMR 才能够生效，哪怕你通过数组的方式去设置 target，例如：target: \['web', 'es5'\]，也会阻塞 HMR 的能力。
但好在官方发布了对接 Webpack5 的 v4 版本，你只需要通过升级 webpack-dev-server 至 next 版本（如果你在项目中通过它提供的 Node API 使用它的话），就能解决上述问题：
不过，因为截止 2020 年 1 月 28 日 webpack-dev-server v4 只发布了 beta0 一个 next 版本[8]，所以还有些能力不太稳定，比如你没法通过 localhost 启动你的项目[9]，但是这些都只是细节问题了，不影响整体的功能完整跑通。
构建时新特性
内置静态资源构建能力 —— Asset Modules
Webpack 只会打包 JS 文件，如果要打包其它文件就需要加上相应的 loader。
在 Webpack5 之前，我们一般都会使用以下几个 loader 来处理一些常见的静态资源，比如 PNG 图片、SVG 图标等等，他们的最终的效果大致如下所示：
-
raw-loader：允许将文件处理成一个字符串导入
-
file-loader：将文件打包导到输出目录，并在 import 的时候返回一个文件的 URI
-
url-loader：当文件大小达到一定要求的时候，可以将其处理成 base64 的 URIS ，内置 file-loader
Webpack5 提供了内置的静态资源构建能力，我们不需要安装额外的 loader，仅需要简单的配置就能实现静态资源的打包和分目录存放。如下：满足规则匹配的资源就能够被存放在 assets 文件夹下面。
// webpack.config.js
module.exports = {
…,
module: {
rules: [
{
test: /.(png|jpg|svg|gif)$/,
type: ‘asset/resource’,
generator: {
// [ext]前面自带"."
filename: ‘assets/[hash:8].[name][ext]’,
},
},
],
},
}
其中 type 取值如下几种：
-
asset/source ——功能相当于 raw-loader。
-
asset/inline——功能相当于 url-loader，若想要设置编码规则，可以在 generator 中设置 dataUrl。具体可参见官方文档[10]。
-
asset/resource——功能相当于 file-loader。项目中的资源打包统一采用这种方式，得益于团队项目已经完全铺开使用了 HTTP2 多路复用的相关特性，我们可以将资源统一处理成文件的形式，在获取时让它们能够并行传输，避免在通过编码的形式内置到 js 文件中，而造成资源体积的增大进而影响资源的加载。
-
asset—— 默认会根据文件大小来选择使用哪种类型，当文件小于 8 KB 的时候会使用 asset/inline，否则会使用 asset/resource。也可手动进行阈值的设定，具体可以参考官方文档[11]。
内置 FileSystem Cache 能力加速二次构建
Webpack5 之前，我们会使用 cache-loader[12] 缓存一些性能开销较大的 loader ，或者是使用 hard-source-webpack-plugin[13] 为模块提供一些中间缓存。在 Webpack5 之后，默认就为我们集成了一种自带的缓存能力（对 module 和 chunks 进行缓存[14]）。通过如下配置，即可在二次构建时提速。
// webpack.config.js
module.exports = {
…,
cache: {
type: ‘filesystem’,
// 可选配置
buildDependencies: {
config: [__filename], // 当构建依赖的config文件（通过 require 依赖）内容发生变化时，缓存失效
},
name: ‘’, // 配置以name为隔离，创建不同的缓存文件，如生成PC或mobile不同的配置缓存
…,
},
}
生产环境下默认的缓存存放目录在 node_modules/.cache/webpack/default-production 中，如果想要修改，可通过配置 name，来实现分类存放。如设置 name: 'production-cache' 时生成的缓存存放位置如下。
PS：如果你直接通过调用 Webpack compiler 实例的 run 方法执行定制化构建操作时，你可能会遇到构建缓存最终没有生成缓存文件的情况，在搜索了 Webpack 的相关 Issues 后我们发现，你还需要手动调用 compiler.close() 来输出缓存文件。
内置 WebAssembly 编译及异步加载能力（sync/async）
WebAssembly[15] 被设计为一种面向 web 的二进制的格式文件，以其更接近于机器码而拥有着更小的文件体积和更快速的执行效率。c/c++ 等高级语言都能直接编译成 .wasm 文件而被 js 调用。Webpack4 本身就已经集成了 WebAssembly 的加载能力，只不过在 Webpack5 拓展了 WebAssembly 的异步加载能力，使得我们可以更灵活地借助 WebAssembly 做更多有意思的事情。
借此机会，我们可以简单介绍一下 WebAssembly 在实际项目开发中的快速上手流程：
以一个简单的求和函数为例，除了按照官方文档[16]生成 WebAssembly 文件外，我们可以通过 WasmFiddle[17] 这个在线网址来编写 c/c++ 程序，再直接转换为 WebAssembly 文件，并且该网站还为我们提供了即时的调试能力。
通过上述方式，我们能够很快的得到一个 program.wasm 文件，将其下载到本地项目中，你便可以开始使用它了。
在 Webpack5 之前，我们会通过 wasm-loader 来进行 WebAssembly 文件的处理，同时在使用时还需要通过如下示例代码才能调用我们封装在 wasm 里的函数：
import wasm from ‘/program.wasm’;
wasm().then(instance => {
const sum = instance.exports.sum;
console.log(sum(1, 2));
}
这个过程势必是重复繁琐的，但是，通过 Webpack5 内置的 WebAssembly 构建能力，我们仅需要配置如下：
// webpack.config.js
module.exports = {
…,
experiments: {
asyncWebAssembly: true,
},
module: {
rules: [
…,
{
test: /.wasm$/,
type: ‘webassembly/async’,
},
],
},
}
而当我们要使用 wasm 的时候，就是如此简单：
import { sum } from ‘./program.wasm’
console.log(sum(1, 2))
内置 Web Worker 构建能力
Web Worker 为 Web 内容在后台线程中运行脚本提供了一种简单的方法。线程可以执行任务而不干扰用户界面。通常，我们可以将一些加解密或者图片处理等一些比较复杂的算法置于子线程中，当子线程执行完毕之后，再向主线程通信。
假如我们有一个比较耗时的计算逻辑存放在 calc.js 文件中，当我们执行完成之后，通过 postMessage 将文件信息通知给主线程。
// calc.worker.js
let num;
for (let i = 0; i <= 20000000; i++) {
if (i === 20000000) {
num = 20000000;
}
}
postMessage({
value: num,
});
master.js 主线程监听子线程的消息，当收到消息传输过来的时候，执行一些相应的操作。
// master.js
worker.onmessage = e => {
console.log(e.data.value);
};
对于以前在处理 Web Worker 的时候，我们需要借助于 worker-loader 来处理，通过如下配置
// webpack.config.js
module.exports = {
…,
module: {
rules: [
{
test: /.worker.js$/,
use: { loader: ‘worker-loader’ },
},
],
},
}
在使用的时候，直接引入 calc.worker.js 文件就能够构造一个 Worker 对象，因此主线程的处理如下：
// master.js
import Worker from ‘./calc.worker.js’;
const worker = new Worker();
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。
深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。
既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！
由于文件比较大，这里只是将部分目录大纲截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且后续会持续更新
如果你觉得这些内容对你有帮助，可以添加V获取：vip1024c （备注前端）
前端面试题汇总
JavaScript
性能
linux
前端资料汇总
一个人可以走的很快，但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎扫码加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！
https://img-blog.csdnimg.cn/img_convert/8087f8c06b129975b3b7be228aa41f0d.png)
JavaScript
性能
linux
前端资料汇总
一个人可以走的很快，但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎扫码加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！
[外链图片转存中…(img-qJ4KLHER-1712781257414)]
1167
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
