Webpack 5 在2020年10月正式发布，更新的内容比较多。我们从头梳理下本次更新的核心内容。
一、构建优化
-
1. Tree Shaking （删除无用代码）
module.exports = {
optimization: {
usedExports: true, // 标记出未被导出的变量
minimize: true // 去除无用变量并压缩代码
}
}
-
2. 合并模块 concatenateModules
module.exports = {
optimization: {
concatenateModules: true // 生产模式(production)下默认启用
}
}
-
3. 副作用 sideEffects
webpack.config.js：
module.exports = {
optimization: {
sideEffects: true // 开启副作用功能(编译时跳过被导出但未被使用、标记为不包含副作用的模块)
}
}
package.json：标记所有模块无副作用
{
"name": "webpack 5.0",
"version": "1.0.0",
"sideEffects": false
}
-
4. 嵌套的 Nested tree-shaking
删除嵌套的模块未被使用的相关代码
-
5. 内部模块 Inner-module tree-shaking
module.exports = {
optimization: {
innerGraph: true // 分析导出和导入之间的依赖关系(生产模式默认启用)，进行代码压缩
}
}
二、长期缓存
三、增量构建
- 默认缓存到
node_modules/.cache/webpack 中，当前可以利用 cacheDirectory 自定义目录module.exports = {
cache: {
type: 'filesystem', // 将缓存类型设置为文件系统，`webpack 4.0` 为 `memory` （开发模式）
cacheDirectory: path.resolve(__dirname,'node_modules/.cac/webpack'), // 自定义缓存位置
}
}
四、Web 新特性
-
1. 资源模块
webpack 4.0 中我们想对 png、mp3、woff2 等资源进行处理时，需要利用 url-loader 来处理。在 webpack 5.0 中内置了对静态资源的处理，添加了 4种 新的模块类型，如下：
| 模块类型 |
说明 |
asset/source |
导出资源的源代码。之前通过使用 raw-loader 实现 |
asset/inline |
导出一个资源的 Base64。之前通过使用 url-loader 实现 |
asset/resource |
发送一个单独的文件并导出 URL。之前通过使用 file-loader 实现 |
asset |
在导出一个 Base64 和发送一个单独的文件之间自动选择，并且配置资源体积限制实现。之前通过使用 url-loader |
webpack 4.0：之前的配置
module: {
rules: [
// 处理图片资源
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
use: {
loader: 'url-loader',
options: {
esModule: false, // 设为false，否则图片编译为 [object Module]
limit: 10 * 1024 // 超过10k
name: 'image/[name].[hash:7].[ext]',
// outputPath: 'image'
publicPath: _publicPath
}
}
},
]
}
webpack 5.0：现在的配置
module: {
rules: [
// 处理图片资源
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
type: 'asset'，
generator: {
filename: 'image/[name].[hash:7].[ext]'
},
parser: {
dataUrlCondition: {
maxSize: 10 * 1024 // 超过10kb
}
}
},
]
}
-
2. 不再为 Node.js 模块 自动引用 Polyfills
不在为例如：path，process，os 等类似依赖提供支持，Polyfill 交由开发者自由控制
module.exports = {
resolve: {
fallback: {
crypto: require.resolve('crypto-browserify'),
events: require.resolve('events'),
http: require.resolve('stream-http'),
https: require.resolve('https-browserify'),
os: require.resolve('os-browserify/browser'),
path: require.resolve('path-browserify'),
process: require.resolve('process/browser')
...
}
}
}
-
3. 模块联邦
不同项目共享模块
-
4. 改进 target 配置
module.exports = {
target: ['web', 'es5'] // Webpack将为网络平台生成一个运行代码,并且只使用ES5的功能
}
-
5. 其他 ( 部分插件版本要求 )
-
webpack-dev-server：v4.0.0 +
-
html-webpack-plugin：v5.0.0 +
- …
五、相关文章
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
