webpack3和webpack5有什么不同
时间: 2023-11-09 17:59:13 浏览: 36
webpack5 相对于 webpack3 来说,有以下几个主要不同点:
1. `webpack5` 对 `tree shaking` 优化更好,能够更好地剔除无用的代码模块;
2. `webpack5` 默认使用 `top-level await` 特性,能够更好地处理异步模块加载;
3. `webpack5` 内置了 `module federation` 特性,能够更好地支持多个独立的构建产物之间的模块共享;
4. `webpack5` 提供了一些新的内置插件和特性,如 `Persistent Caching` 等。
相关问题
webpack5中 output assetModuleFilename属性有什么用
在 Webpack 5 中,'assetModuleFilename' 属性用于配置生成的资源文件(如图片、字体等)在输出目录中的文件名格式。默认情况下,Webpack 5 会将这些资源文件输出到 'output.path' 目录下,并根据文件类型以不同的文件名格式进行命名,例如:'[name][ext]'、'[name].[contenthash][ext]' 等。
通过配置 'assetModuleFilename' 属性,你可以自定义资源文件的输出文件名格式。该属性支持以下几种变量:
- '[hash]':资源内容的哈希值
- '[contenthash]':资源内容的哈希值,只有在资源内容发生变化时才会改变
- '[name]':资源的名称
- '[ext]':资源的后缀名
例如,可以通过以下配置将所有图片资源的文件名格式设置为 'images/[name].[contenthash][ext]':
```
module.exports = {
//...
output: {
assetModuleFilename: 'images/[name].[contenthash][ext]'
}
};
```
这样,所有图片资源都将被输出到 'output.path/images' 目录下,并且文件名以资源名称和内容哈希值为文件名,以资源后缀名为文件后缀名。
webpack3和webpack4的区别
webpack3和webpack4是两个不同版本的Webpack,它们之间有一些重要的区别。
1. 性能优化:Webpack 4在构建速度和打包体积方面有了显著的改进。通过引入新的构建策略和优化算法,Webpack 4能够更快地构建项目,并生成更小的代码包。
2. 模式配置:Webpack 4引入了模式(mode)的概念,可以指定不同的模式来优化构建结果。目前Webpack 4支持三种模式:开发模式(development)、生产模式(production)和默认模式(none)。
3. 零配置:Webpack 4引入了一种新的零配置(zero configuration)模式,即不需要任何配置文件即可进行基本的打包操作。这在简化项目的配置过程方面非常有用。
4. Tree Shaking:Webpack 4对Tree Shaking进行了改进,可以更好地消除未使用的代码,减小打包体积。
5. Mode 默认值为 'production':在Webpack 3中,默认的mode是 'development',而在Webpack 4中,默认的mode是 'production'。这意味着Webpack 4会自动开启一些生产环境的优化策略。
6. 新的插件系统:Webpack 4引入了一种新的插件系统,使得编写和使用插件更加简单和灵活。同时,Webpack 4还对一些常用的插件进行了更新和改进,以提供更好的开发体验。
需要注意的是,升级到Webpack 4可能需要你对项目进行一些调整和修改,但由于Webpack 4的性能和功能优化,升级通常是值得的。