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}`
}