webpack3的詳細(xì)講解請(qǐng)轉(zhuǎn)到這里http://www.itdecent.cn/p/42e11515c10f

2018年8月25號(hào)webpack4正式發(fā)布。再次之后只要使用npm install webpack命令，默認(rèn)安裝的就是版本4。在不知道情況下，向我一樣的小白就會(huì)跳入各種坑中。接下來我說說版本4與以前版本的區(qū)別之處。

安裝

首先要重新安裝webpack依賴包
1 webpack
2 webpack-cli
2 各種配件升級(jí)，各種loader升級(jí)。如果在編譯過程中報(bào)can not find xxx的錯(cuò)誤，說明xxx對(duì)應(yīng)的loader可能需要升級(jí)了，因?yàn)閣ebpack4去掉了this.options的支持

在webpack4以后，webpack啟動(dòng)命令行的代碼放入了webpack-cli 中。
如果只安裝了webpack，那么它只能在nodejs中使用，不能再命令行中使用。

配置

mode

webpack增加了一個(gè)mode配置，只有兩種值development | production。對(duì)不同的環(huán)境他會(huì)啟用不同的配置，比如開發(fā)環(huán)境下啟用optimization.nameModules（原nameModulesPlugin已經(jīng)棄用），而生產(chǎn)環(huán)境默認(rèn)棄用optimization.noEmitOnErrors`（原noEmitOnErrorsPlugin先已棄用）

不同環(huán)境下配置如下

1 默認(rèn)生產(chǎn)環(huán)境開起了很多代碼優(yōu)化（minify, splite）
2 開發(fā)時(shí)開啟注視和驗(yàn)證，并加上了evel devtool
3 生產(chǎn)環(huán)境不支持watching，開發(fā)環(huán)境優(yōu)化了打包的速度
4 生產(chǎn)環(huán)境開啟模塊串聯(lián)（原ModulecondatenationPlugin）
5 自動(dòng)設(shè)置process.env.NODE_EVN到不同環(huán)境，也就是不使用DefinePlugin了
6 如果mode設(shè)置none，所有默認(rèn)設(shè)置都去掉了。

CommonsChunkPlugin

相信大家聽說webpack升級(jí)到4，最大的感觸就是去點(diǎn)了這個(gè)CommonsChunkPlugin,因?yàn)楣俜桨l(fā)的change log最大的篇幅就是介紹的他
CommonsChunkPlugin刪除之后，改成使用optimization.splitChunks進(jìn)行模塊劃分，詳細(xì)文檔看這里

官方的說法是默認(rèn)設(shè)置已經(jīng)對(duì)大部分用戶來說非常棒了，但是需要注意一個(gè)問題，默認(rèn)配置只會(huì)對(duì)異步請(qǐng)求的模塊進(jìn)行提取拆分，如果要對(duì)entry進(jìn)行拆分，需要設(shè)置optimization.splitChunks.chunks = 'all'。其他的內(nèi)容大家就自己研究吧。

對(duì)應(yīng)之前我們拆分runtime的情況，現(xiàn)在也有一個(gè)配置optimization.runtimeChunk，設(shè)置為true就會(huì)自動(dòng)拆分runtime文件

UglifyJsPlugin

現(xiàn)在也不需要使用這個(gè)plugin了，只需要使用optimization.minimize為true就行，production mode下面自動(dòng)為true

optimization.minimizer可以配置你自己的壓縮程序