webpack3和webpack4區別

1.mode

webpack增長了一個mode配置，只有兩種值development | production。對不一樣的環境他會啓用不一樣的配置。

好比設置mode等於'development'，會將 process.env.NODE_ENV 的值設爲 development，開發環境下啓用optimization.nameModules（原nameModulesPlugin已經棄用）。設置mode等於'production'，會將 process.env.NODE_ENV 的值設爲 production，而生產環境默認用optimization.noEmitOnErrors`（原noEmitOnErrorsPlugin已棄用）

webpack4中經過內置的mode使用相應模式的內置優化。設置mode等於'development'，會將 process.env.NODE_ENV 的值設爲 development。啓用 NamedChunksPlugin 和 NamedModulesPlugin。設置mode等於'production'，會將 process.env.NODE_ENV 的值設爲 production。啓用 FlagDependencyUsagePlugin, FlagIncludedChunksPlugin, ModuleConcatenationPlugin, NoEmitOnErrorsPlugin, OccurrenceOrderPlugin, SideEffectsFlagPlugin 和 UglifyJsPlugin.

不一樣環境下配置以下

1 默認生產環境開起了不少代碼優化（minify, splite）
2 開發時開啓注視和驗證，並加上了evel devtool
3 生產環境不支持watching，開發環境優化了打包的速度
4 生產環境開啓模塊串聯（原ModulecondatenationPlugin）
5 自動設置process.env.NODE_EVN到不一樣環境，也就是不使用DefinePlugin了
6 若是mode設置none，全部默認設置都去掉了。

 

2.CommonsChunkPlugin

CommonChunksPlugin已經從webpack4中移除。可以使用optimization.splitChunks進行模塊劃分（提取公用代碼）。

可是須要注意一個問題，默認配置只會對異步請求的模塊進行提取拆分，若是要對entry進行拆分，須要設置optimization.splitChunks.chunks = 'all'。

對應以前咱們拆分runtime的狀況，如今也有一個配置optimization.runtimeChunk，設置爲true就會自動拆分runtime文件

 

3.webpack4使用MiniCssExtractPlugin取代ExtractTextWebpackPlugin。

4.代碼分割。

使用動態import，而不是用system.import或者require.ensure

5.vue-loader。

使用vue-loader插件爲.vue文件中的各部分使用相對應的loader，好比css-loader等

6.UglifyJsPlugin

如今也不須要使用這個plugin了，只須要使用optimization.minimize爲true就行，production mode下面自動爲true

optimization.minimizer能夠配置你本身的壓縮程序