webpack5踩坑指南

時間 2019-12-08

標籤 webpack5 webpack 指南简体版

原文原文鏈接

序言

webpack5即將發佈，打算趁發佈前踩個坑，以前從alpha版本就有關注，本次重點更新在長期緩存，tree shakking和es6打包這塊，具體更新日誌能夠參考官方。css

更新日誌

官方更新日誌html

node版本更新爲v10。
webpack5默認採用es6代碼進行輸出，4是es5的(可經過設置output.ecmaVersion來使用es5進行打包，默認是採用es2015進行生成)。
webpack <= 4帶有許多node.js核心模塊的polyfill，5去掉了這些模塊，專一於與前端兼容的模塊。
優化了打包後的文件大小
長期緩存（默認開啓）
自定義json解析器
優化後的tree shakking (能夠針對嵌套的模塊進行分析，未使用將在生產模式刪除)
splitChunk和模塊大小(能夠針對js和css樣式進行更細緻的切割，並用於minSize和maxSize)
模塊命名
編譯器空閒並關閉(在node中使用wepback()結束後，須要手動調用compiler.close(), compiler是當前webpack實例)

環境準備

node v10以上，官方最低8.9.0，我的v13.1.0
webpack 5.0.0-beta.7
webpack-cli 3.13.0

以上爲我我的環境，僅供參考。前端

參考文章

Webpack 5 升級實驗

開始踩坑

打包對比

新建一個webpack.config.js，內容以下node

const path = require('path')

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.join(__dirname, 'dist'),
    filename: '[name].[chunkhash].js'
  }
}
// package.json
"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack --mode development",
    "build": "webpack --mode production"
  },
複製代碼

上圖爲webpack5打包後的結果，左邊是開發環境，右邊是生產環境。

這個是webpack4打包後的結果，左邊開發環境，右邊生產環境，webpack5相對4來講，打包後的內容少了一丟丟，代碼也採用了es6的語法，去掉了webpack4自帶的polyfill，體積更小。

上圖爲4和5的時間對比，5的時間是175ms，4只有96ms，就速度來講，仍是4比較有優點，具體緣由不明，可能和內部優化有關。

如今來安裝html-webpack-plugin和webpack-dev-server,讓配置支持熱更新和htmlwebpack

npm i html-webpack-plugin webpack-dev-sever -D

// package.json的配置修改成
"dev": "webpack-dev-server --mode development"
複製代碼

安裝完成後配置變成修改爲這樣git

而後，html-webpack-plugin給咱們帶來了個驚喜(報錯)，是否是很刺激，很意外。es6

說htmlWebpackPluginAlterChunks沒法添加這個屬性，通過大佬提醒，咱們能夠經過安裝最新版的html-webpack-plugin。

yarn add html-webpack-plugin@next -D
複製代碼

安裝完成後，從新啓動咱們的webpack，發現問題已經解決，項目可繼續運行。而後發現編譯時間太長了，目前還僅僅只有個console和一個什麼都沒的html頁面，咱們能夠開啓webpack的多線程，進行打包，安裝terser-webpack-plugin便可，安裝完後，配置以下github

咱們加了一個optimization屬性，用來寫terserPlugin的配置，經過parallel這個屬性，咱們能夠進行多線程打包，默認是系統的線程數 - 1個，能夠手動設置，支持布爾和數字，固然這個插件也能夠作代碼優化，混淆，去除console等，具體去看官方文檔 terser-webpack-plugin。啓動運行後發現，html-webpack-plugin又給咱們帶來了一個報錯，報錯內容以下：

能夠參考這個 issue，通過一番查找，找到了緣由，咱們找到html-webpack-plugin下面的index.js把上面註釋掉的那行換成下面的那一行，就能夠成功運行了。

好像並沒什麼變化，試了幾回，每次打包時間不固定，可能文件過小吧，優化並不明顯。

tree shakking

webpack5的結果 web

webpack4的結果

5直接把模塊裏面的內容打印了出來，4把變量打印了出來，共同點是都去掉了未使用的b，官方解釋是webpack如今能夠針對導出的嵌套模塊進行訪問，從新導出對象時，能夠改善tree shakking，感受應該是webpack在編譯以前，提早對模塊的依賴進行分析，而後作了預處理，而後編譯時，把未使用的模塊直接刪掉。深刻的就不瞭解了。 webpack5還開啓了optimization.innerGraph，默認在生產模式啓動，該選項能夠針對模塊的符號進行分析，從而找出導入和導入的依賴關係，相對來講，webpack4並無這個功能。能夠針對如下內容進行分析：npm

function
class
export default 或變量聲明
局部變量
類和函數表達式

如今咱們又新加了如下代碼

webpack5:

webpack4:

爲了方便測試，我加了console.log('test')，從而更好看結果，結果很顯然，5並沒把test函數使用的其餘部分打進去，而4把內容打了進去，webpack5在調用test函數的時候，去分析了固然的引用，從而去掉了未使用的something這個變量，當設置optimization.sideEffects爲false時，將會刪除更多內容。