Webpack5学习笔记（六）： Webpack5 新特性

Webpack5新特性解析

最新推荐文章于 2025-07-28 12:00:00 发布

原创最新推荐文章于 2025-07-28 12:00:00 发布 · 1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#webpack #webpack5

前端开发专栏收录该内容

6 篇文章

订阅专栏

Webpack5着重提升了构建性能，通过持久缓存和改进算法优化长期缓存。自动删除Node.js Polyfills减少无用代码，新的Chunk和模块ID算法增强长期缓存。Tree Shaking进一步优化，处理嵌套模块和Commonjs，输出支持ES5和ES6。SplitChunk和Caching策略改进，监视输出文件变化，提供更智能的默认值。

Webpack5学习笔记（六）： Webpack5 新特性

Webpack版本：webpack 5.24.4 webpack-cli 4.5.0
说明：来自尚硅谷webpack视频教程（非原创）

第7章： Webpack5 新特性

7.1 关于webpack4的一点补充

下载不同的webpack版本。比如下载webpack4可以使用：npm i webpack@4 webpack-cli -D
使用当前本地的webpack构建代码，需要命令：npx webpack
检查webpack版本：npx webpack -v

7.2 关于webpack5的新功能总结

此版本重点关注以下内容:

通过持久缓存提高构建性能.
使用更好的算法和默认值来改善长期缓存.
通过更好的树摇和代码生成来改善捆绑包大小.
清除处于怪异状态的内部结构，同时在 v4 中实现功能而不引入任何重大更改.
通过引入重大更改来为将来的功能做准备，以使我们能够尽可能长时间地使用 v5.

7.3 自动删除 Node.js Polyfills

早期，webpack 的目标是允许在浏览器中运行大多数 node.js 模块，但是模块格局发生了变化，许多模块用途现在主要是为前端目的而编写的。webpack <= 4 附带了许多 node.js 核心模块的 polyfill，一旦模块使用任何核心模块（即 crypto 模块），这些模块就会自动应用。
尽管这使使用为 node.js 编写的模块变得容易，但它会将这些巨大的 polyfill 添加到包中。在许多情况下，这些 polyfill 是不必要的。
webpack 5 会自动停止填充这些核心模块，并专注于与前端兼容的模块。
迁移：
- 尽可能尝试使用与前端兼容的模块。
- 可以为 node.js 核心模块手动添加一个 polyfill。错误消息将提示如何实现该目标。

7.4 Chunk 和模块 ID

添加了用于长期缓存的新算法。在生产模式下默认情况下启用这些功能。

chunkIds: "deterministic", moduleIds: "deterministic"

7.5 Chunk ID

你可以不用使用 import(/* webpackChunkName: "name" */ "module") 在开发环境来为 chunk 命名，生产环境还是有必要的
webpack 内部有 chunk 命名规则，不再是以 id(0, 1, 2)命名了

7.6 Tree Shaking

1. webpack 现在能够处理对嵌套模块的 tree shaking

// 在生产环境中, inner 模块暴露的 `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);

2. webpack 现在能够多个模块之前的关系

import { something } from './something';

function usingSomething() {
  return something;
}

export function test() {
  return usingSomething();
}

当设置了"sideEffects": false时，一旦发现test方法没有使用，不但删除test，还会删除"./something"

3. webpack 现在能处理对 Commonjs 的 tree shaking

7.7 Output

webpack 4 默认只能输出 ES5 代码
webpack 5 开始新增一个属性 output.ecmaVersion, 可以生成 ES5 和 ES6 / ES2015 代码.

如：output.ecmaVersion: 2015

7.8 SplitChunk

// webpack4
minSize: 30000;

// webpack5
minSize: {
  javascript: 30000,
  style: 50000,
}

7.9 Caching

// 配置缓存
cache: {
  // 磁盘存储
  type: "filesystem",
  buildDependencies: {
    // 当配置修改时，缓存失效
    config: [__filename]
  }
}

缓存将存储到 node_modules/.cache/webpack

7.10 监视输出文件

之前 webpack 总是在第一次构建时输出全部文件，但是监视重新构建时会只更新修改的文件。
此次更新在第一次构建时会找到输出文件看是否有变化，从而决定要不要输出全部文件。

7.11 默认值

entry: "./src/index.js
output.path: path.resolve(__dirname, "dist")
output.filename: "[name].js"

7.12 更多内容

https://github.com/webpack/changelog-v5