webpack5 和 webpack4 的区别有哪些

1、Tree Shaking(强大)

如果我们的项目中引入了 lodash 包，但是我只有了其中的一个方法。其他没有用到的方法是不是冗余的？此时 tree-shaking 就可以把没有用的那些东西剔除掉，来大大减少最终的bundle体积。

• usedExports : true, 标记没有用的叶子
• minimize: true, 摇掉那些没有用的叶子

 // webpack.config.js中

  module.exports = {

     optimization: {

       usedExports: true, //只导出被使用的模块

       minimize : true // 启动压缩

     }

  }

现在可以处理commonjs的tree shaking

2.压缩代码

内部本身就自带 js 压缩功能，他内置了 terser-webpack-plugin 插件，我们不用再下载安装。而且在 mode=“production” 的时候会自动开启 js 压缩功能。

 // webpack.config.js中

  module.exports = {

     optimization: {

       usedExports: true, //只导出被使用的模块

       minimize : true // 启动压缩

     }

  }

3.缓存配置

• webpack4

npm install hard-source-webpack-plugin -D
const HardSourceWebpackPlugin = require('hard-source-webpack-plugin') 

module.exports = { 
plugins: [
  // 其它 plugin... 
  new HardSourceWebpackPlugin(), 
] }

• webpack5 缓存配置

webpack5 内部内置了 cache 缓存机制。直接配置即可。

cache 会在开发模式下被设置成 type： memory 而且会在生产模式把cache 给禁用掉。

// webpack.config.js
module.exports= {
  // 使用持久化缓存
  cache: {
    type: 'filesystem'，
    cacheDirectory: path.join(__dirname, 'node_modules/.cac/webpack')
  }
}

4.启动服务的差别

1.webpack4 启动服务

通过 webpack-dev-server 启动服务

2.webpack5 启动服务

内置使用 webpack serve 启动，但是他的日志不是很好，所以一般都加都喜欢用 webpack-dev-server 优化。

5.打包

import {num} from './num';
function useNum(){
    return num;
}

export function num1(){
    return useNum();
}

• webpack4打包:即使后续没有使用到num1的函数，依然会将代码打包进去
• webpack5打包:后续没有使用到num1的函数，不会将代码打包进去

6.输出代码

• webpack4只能输出es5的代码
• webpack5新增属性output.ecmaVersion，可以生成ES5和ES6的代码

splitChunk

// webpack4将超过30kb的文件单独提为一个chunk
minSize: 30000;

// webpack5可以区分是js还是css,可以精确划分
minSize:{javascript:30000,css:50000}

// thread-loader提高打包效率

// 将当前模块的记录其他模块的hash单独打包成一个文件 runtime
// 解决：修改a文件导致b文件的contenthash修改

runtimeChunk:{
    name:entryPoint=>`runtime-${entryPoint.name}`
}