Webpack 4 api 瞭解與使用

webpack 最近升級到了 v4.5+版

01 官方不再支持 node4 以下版本

官方不再支持 node4 以下版本

官方不再支持 node4 以下的版本,所以如果你的node版本太低，先開始升級node吧！

話說node10 都出來了一段時間了,想必現在沒人會去裝 node v4 以下的版本了,node官網都已經宣佈node4.x已經結束使命了。

02cli功能移到了webpack-cli

cli功能移到了webpack-cli

cli功能從webpack移到了webpack-cli，所以如果你要使用cli功能，除了安裝 webpack 外，還需要安裝 webpack-cli （基本都會使用cli ~）

yarn add -D webpack webpack-cli (npm install)

03用新配置項mode配置生產或開發環境

用新配置項mode配置生產或開發環境

用新的配置項--mode配置生產或開發環境 (mode 可以是production或development或none)。

可以在 webpack 命令加上--mode參數，或者在 webpack 配置文件中加上。

production 模式會開啓各種特性優化構建，使用 scope hoisting 和 tree-shaking,自動啓用 uglifyjs 對代碼進行壓縮,並且會自動將 process.env.NODE_ENV 設置爲production。development 模式主要會優化開發時的增量構建，另外 process.env.NODE_ENV 會被設置爲development,無需再用 define 插件定義。

04開始使用optimization.splitChunks

開始使用optimization.splitChunks

CommonsChunkPlugin被廢棄，開始使用optimization.splitChunks

之前我們做代碼分割，少不了用 CommonsChunkPlugin 分離 vendor 和app代碼。 

05提取 css

ExtractTextWebpackPlugin 和 mini-css-extract-plugin 提取 css。

這兩個插件都可以用於提取 css 到獨立的文件，ExtractTextWebpackPlugin 是 webpack v4 前大家都使用的插件， 現在也支持 webpack v4(不過在使用的時候發現有時會生成一些空的css文件), 而 mini-css-extract-plugin 是一個輕量級易於使用的基於 webpack v4 的插件，使用後感覺性能更好，大家可以嘗試。

06其他調整項備忘

NoEmitOnErrorsPlugin- > optimization.noEmitOnErrors（默認情況下處於生產模式）
ModuleConcatenationPlugin- > optimization.concatenateModules（默認情況下處於生產模式）
NamedModulesPlugin- > optimization.namedModules（在開發模式下默認開啓）
webpack命令優化 -> 發佈了獨立的 webpack-cli 命令行工具包
webpack-dev-server -> 建議升級到最新版本
html-webpack-plugin -> 建議升級到的最新版本
file-loader -> 建議升級到最新版本
url-loader -> 建議升級到最新版本