webpack5 和 webpack4 的区别有哪些？

最新推荐文章于 2024-08-10 08:47:04 发布

管理界的扫地僧

最新推荐文章于 2024-08-10 08:47:04 发布

阅读量6.7k

点赞数 5

分类专栏：面试题文章标签： vue.js node.js javascript

本文链接：https://blog.csdn.net/weixin_48181168/article/details/120445028

版权

面试题专栏收录该内容

34 篇文章 17 订阅

订阅专栏

一、压缩代码

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’。