一、webpack 5 的介绍及下载
webpack 5
通过持久缓存提高构建性能。webpack 5
使用更好的算法和默认值来改善长期缓存。webpack 5
通过更好的树摇和代码生成来改善捆绑包大小。webpack 5
清除处于怪异状态的内部结构,同时在v4
中实现功能而不引入任何重大更改。webpack 5
通过引入重大更改来为将来的功能做准备,以使我们能够尽可能长时间地使用v5
。webpack 5
的下载可以通过npm i webpack@next webpack-cli -D
命令进行下载。
二、webpack 5 的变化
- 自动删除 Node.js Polyfills
- 早期,
webpack
的目标是允许在浏览器中运行大多数node.js
模块,但是模块格局发生了变化,许多模块用途现在主要是为前端目的而编写的。webpack <= 4
附带了许多node.js
核心模块的polyfill
,一旦模块使用任何核心模块(即crypto
模块),这些模块就会自动应用。 - 尽管这使使用为
node.js
编写的模块变得容易,但它会将这些巨大的polyfill
添加到包中。在许多情况下,这些polyfill
是不必要的。 webpack 5
会自动停止填充这些核心模块,并专注于与前端兼容的模块。- 迁移,尽可能尝试使用与前端兼容的模块,以及可以为
node.js
核心模块手动添加一个polyfill
和错误消息将提示如何实现该目标。
- Chunk 和模块 ID
- 添加了用于长期缓存的新算法,在生产模式下默认情况下启用这些功能,如下所示:
chunkIds: "deterministic", moduleIds: "deterministic"
- Chunk ID
- 你可以不用使用
import(/* webpackChunkName: "name" */ "module")
在开发环境来为chunk
命名,生产环境还是有必要的 webpack
内部有chunk
命名规则,不再是以id(0, 1, 2)
命名了
- Tree Shaking
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);
webpack
现在能够多个模块之前的关系,当设置了"sideEffects": false
时,一旦发现test
方法没有使用,不但删除test
,还会删除"./something"
,代码如下所示:import { something } from './something'; function usingSomething() { return something; } export function test() { return usingSomething(); }
webpack
现在能处理对Commonjs
的tree shaking
- Output
webpack 4
默认只能输出ES5
代码webpack 5
开始新增一个属性output.ecmaVersion
, 可以生成ES5
和ES6 / ES2015
代码,比如output.ecmaVersion: 2015
- SplitChunk
webpack4
,代码如下所示:minSize: 30000;
webpack5
,代码如下所示:minSize: { javascript: 30000, style: 50000, }
- Caching
- 缓存将存储到
node_modules/.cache/webpack
,代码如下所示:// 配置缓存 cache: { // 磁盘存储 type: "filesystem", buildDependencies: { // 当配置修改时,缓存失效 config: [__filename] } }
- 监视输出文件
- 之前
webpack
总是在第一次构建时输出全部文件,但是监视重新构建时会只更新修改的文件 - 此次更新在第一次构建时会找到输出文件看是否有变化,从而决定要不要输出全部文件
- 默认值
entry: "./src/index.js
output.path: path.resolve(__dirname, "dist")
output.filename: "[name].js"
- 更多内容,可以看
https://github.com/webpack/changelog-v5