webpack5 和 webpack4 的区别有哪些 ?
2021/9/23 23:12:25
本文主要是介绍webpack5 和 webpack4 的区别有哪些 ?,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
一、压缩代码
1.webpack4
webpack4 上需要下载安装 terser-webpack-plugin 插件,并且需要以下配置:
const TerserPlugin = require('terser-webpack-plugin') module.exports = { // ...other config optimization: { minimize: !isDev, minimizer: [ new TerserPlugin({ extractComments: false, terserOptions: { compress: { pure_funcs: ['console.log'] } } }) ] }
2.webpack5
内部本身就自带 js 压缩功能,他内置了 terser-webpack-plugin 插件,我们不用再下载安装。而且在 mode=“production” 的时候会自动开启 js 压缩功能。
如果你要在开发环境使用,就用下面:
// webpack.config.js中 module.exports = { optimization: { usedExports: true, //只导出被使用的模块 minimize : true // 启动压缩 } }
二、webpack 缓存
1.webpack4 缓存配置
npm install hard-source-webpack-plugin -D
const HardSourceWebpackPlugin = require('hard-source-webpack-plugin') module.exports = { plugins: [ // 其它 plugin... new HardSourceWebpackPlugin(), ] }
2. webpack5 缓存配置
webpack5 内部内置了 cache 缓存机制。直接配置即可。
cache 会在开发模式下被设置成 type: memory 而且会在生产模式把cache 给禁用掉。
// webpack.config.js module.exports= { // 使用持久化缓存 cache: { type: 'filesystem', cacheDirectory: path.join(__dirname, 'node_modules/.cac/webpack') } }
type 的可选值为: memory 使用内容缓存,filesystem 使用文件缓存。
三、启动服务的差别
1.webpack4 启动服务
通过 webpack-dev-server 启动服务
2.webpack5 启动服务
内置使用 webpack serve 启动,但是他的日志不是很好,所以一般都加都喜欢用 webpack-dev-server 优化。
四、devtool的差别
sourceMap需要在 webpack.config.js里面直接配置 devtool 就可以实现了。而 devtool有很多个选项值,不同的选项值,不同的选项产生的 .map 文件不同,打包速度不同。
一般情况下,我们一般在开发环境配置用“cheap-eval-module-source-map”,在生产环境用‘none’。
devtool在webpack4和webpack5上也是有区别的
v4: devtool: 'cheap-eval-module-source-map'
v5: devtool: 'eval-cheap-module-source-map'
这篇关于webpack5 和 webpack4 的区别有哪些 ?的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-11-01UniApp 中组件的生命周期是多少-icode9专业技术文章分享
- 2024-11-01如何使用Svg Sprite Icon简化网页图标管理
- 2024-10-31Excel数据导出课程:新手从入门到精通的实用教程
- 2024-10-31Excel数据导入课程:新手入门指南
- 2024-10-31RBAC的权限课程:新手入门教程
- 2024-10-31Svg Sprite Icon课程:新手入门必备指南
- 2024-10-31怎么配置 L2TP 允许多用户连接-icode9专业技术文章分享
- 2024-10-31怎么在FreeBSD上 安装 OpenResty-icode9专业技术文章分享
- 2024-10-31运行 modprobe l2tp_ppp 时收到“module not found”消息提醒是什么-icode9专业技术文章分享
- 2024-10-31FreeBSD的下载命令有哪些-icode9专业技术文章分享